Question

我想在下拉列表中选择项目后获取Item的价格。我使用了ajax调用，但我的代码不在$.ajax({...内。我的代码出了什么问题？

我在php文件中使用了alert但没有显示，这意味着我的代码没有调用php文件。

<script type='text/javascript'>
			$("#puja_name2").on('change',function()
			{	
				var id=$(this).val();
				var data = 'id='+ id;
				$.ajax({
					type: "POST",
					url: "../ajax_price.php",
					data: data,
					cache: false,
					success: function(html)
					{
						$("#puja_price2").html(data);
				
					}
				
				});
			});
	</script>

<div class="form-group">
  <label>
  Puja Name<span class="font-red">* </span>:
  </label>
                                
  <select class="form-control" name="puja_name2" id="puja_name2"  data-validetta="required">
   <option value="">Select Puja Name</option>
    <?php
														  
    $SQL_STATEMENT_puja = $DatabaseCo->dbLink->query("SELECT * FROM puja_type ");
   while($DatabaseCo->dbRow = mysqli_fetch_object($SQL_STATEMENT_puja)){
    ?>
 <option value="<?php echo $DatabaseCo->dbRow->puja_id; ?>" ><?php echo $DatabaseCo->dbRow->puja_name; ?></option>
   <?php                                 
    } 
                                ?>
 </select>
 </div>
						
 <div class="form-group">
 	<label> Price <span class="font-red">* </span>:</label>
  <select  id="puja_price2" >
                                    
	</select>										 
 </div>

Answer 1

您必须将jquery puja_name更改为puja_id：

$("#puja_id").on('change',function()

Answer 2

你的代码萌芽有些问题：

1）你有

$(document).ready(function(){
<script>
//code
</script>
}

您的代码应该是：

<script type="text/javascript">
$(document).ready(function() {
//code
});
</script>

如果您需要在JS代码中添加注释，请不要使用。而是像我在上面的代码中看到的那样使用//。

2）您需要将您的jquery puja_name更改为puja_id，因为您的<select></select> ID为puja_id所以：
这个 $("#puja_name").on('change',function() {
转向这个 $("#puja_id").on('change',function() {

3）我并不是最好的SQL语句，但我觉得使用下面的代码可以帮助你更多（你不必）。

<?php

$SQL_STATEMENT_puja = "SELECT * FROM puja_type WHERE status='APPROVED' ORDER BY puja_name ASC";
$DatabaseCo = $conn->query($SQL_STATEMENT_puja);

$puja=$row['puja']; //This should actually be $puja=$row['puja_id'];

while($row = $DatabaseCo->fetch_assoc()) {

?>
<option value="<?php echo $row['puja_id']; ?>" <?php if($row['puja_id']==$puja) { echo "selected"; } ?>><?php echo $row['>puja_name']; ?></option>
<?php
}
?>

4）在您的JQuery中，您将$("#puja_price").html(html);视为$("#puja_price").html(data);

5）我也看到你将其作为#puja_price，但你的html中没有id puja_price所以

我建议更改此内容
$("#puja_price").html(html);
至
$("#puja_price2").html(data);

6）您的JQuery代码是
$.ajax ({
应该是：$.ajax({

完整代码：

<div class="form-group">
    <label>
    Puja Name<span class="font-red">* </span>:
    </label>
    <select class="form-control" name="puja_id" id="puja_id" data-validetta="required">
        <option value="">Select Puja Name</option>
        <?php
            //If you already have the connection setup you don't need to add this
            $servername = "localhost";
            $username = "username";
            $password = "password";
            $dbname = "myDB";

            // Create connection
            $conn = new mysqli($servername, $username, $password, $dbname);
            // Check connection
            if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
            } 

            $SQL_STATEMENT_puja = "SELECT * FROM puja_type WHERE status='APPROVED' ORDER BY puja_name ASC";
            $DatabaseCo = $conn->query($SQL_STATEMENT_puja);

            $puja=$row['puja'];

            while($row = $DatabaseCo->fetch_assoc()) {

        ?>
        <option value="<?php echo $row['puja_id']; ?>" <?php if($row['puja_id']==$puja) { echo "selected"; } ?>><?php echo $row['>puja_name']; ?></option>
        <?php

            }

        ?>
    </select>
</div>
<div class="form-group">
    <label>
        Price <span class="font-red">* </span>:
    </label>
    <input type="text" class="form-control " id="puja_price2" name="puja_price2" disabled>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $("#puja_id").on('change',function() {
        var id=$(this).val();
        var data = 'id='+ id;
        $.ajax({
            type: "POST",
            url: "../ajax_price.php",
            cache: false,
            data: data,
            success: function(html) {
                $("#puja_price2").html(data);
            }
        });
    });
});
</script>

如果更改对您有用，请告诉我

Answer 3

Try this in your JS code.


<script src="jquery.js"></script>


    <script type='text/javascript'>
        $(document).ready(function(){

    $('#puja_id').change(function(){

                var id = $(this).val();
                var data = 'id='+id;

                $.ajax({
                    type: "POST",
                    url: "../ajax_price.php",       
                    data: data,
                    cache: false,
                    success:function(res){
                    $('#puja_price2').html(res);
                    }
                });

    }); 
}); 
</script>

Ajax没有调用php文件？

3 个答案: