从PHP文件更改功能ajax调用

Question

以下代码由下拉列表“（id = name）”组成，该下拉列表通过可正常工作的ajax调用从“ listplace.php”填充。

现在，我尝试使用change function进行另一个ajax调用。 当我选择下拉列表中已填充的特定项目时，它必须将'where'查询中的选定项目name1传递给dataprod.php并且必须通过清除现有的可用产品列表来显示产品。

我对dataprod.php的$name1响应感到怀疑。 请帮忙！！

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    $.ajax({
        type: "POST",
        data: {place: '<?= $_GET['place'] ?>'},
        url: 'listplace.php',
        dataType: 'json',
        success: function (json) {
            if (json.option.length) {
                var $el = $("#name"); 
                $el.empty(); // remove old options
                for (var i = 0; i < json.option.length; i++) {
                    $el.append($('<option>',
                        {
                            value: json.option[i],
                            text: json.option[i]
                        }));
            }else {
                alert('No data found!');
            }
        }
    });
</script>

阿贾克斯2

$(document).ready(function(){
 $("#name").change(function(){
 var name1 = this.value;
 $.ajax ({
     url: "dataprod.php",
     data: {place: '<?= $_GET['name1'] ?>'},
     success: function (response) {
        $('.products-wrp').html('')
        $('.products-wrp').html(response);     
     }
      }else {
        $('.products-wrp').html('');
  }
}

dataprod.php

<?php
include("config.inc.php");
$name1 = $_POST['name1'];
$results = $mysqli_conn->query("SELECT product_name, product_desc, product_code,  
product_image, product_price FROM products_list where product_name='$name1'");

$products_list =  '<ul id ="products_list" class="products-wrp">';
while($row = $results->fetch_assoc()) {
$products_list .= <<<EOT
<li>
<form class="form-item">
<h4>{$row["product_name"]}</h4>
<div>
<img src="images/{$row["product_image"]}" height="62" width="62">
</div>
<div>Price : {$currency} {$row["product_price"]}<div>
</form>
</li>
EOT;
}
$products_list .= '</ul></div>';
echo $products_list;
?>                 

Answer 1

由于您正在通过ajax操作加载的元素上调用ajax事件，因此change事件不会被绑定，因此不会发生任何事情。

对于ajax 2操作，请使用以下代码。

$(document.body).on('change',"#name",function (e) {
   //doStuff
  var name1 = this.value;
 $.ajax ({
     url: "dataprod.php",
     data: {place: '<?= $_GET['name1'] ?>'},
     success: function (response) {
        $('.products-wrp').html('')
        $('.products-wrp').html(response);     
     }
      }else {
        $('.products-wrp').html('');
  }
}