Question

我在使用PHP结合Ajax更新下拉列表更改产品页面时遇到问题。现在，当我从下拉菜单中选择一个项目时，它不会更新查询。查询本身工作正常。

我想要的是：当用户从多个下拉菜单中的任何一个中选择不同的选项时，将通过Ajax POST请求更新查询。因此，通过选择下拉列表来过滤结果。

HTML：

<select id="Gender">
    <option value="" disabled selected>--Geslacht--</option>
    <option value="1">Man</option>
    <option value="2">Vrouw</option>
    <option value="3">Beide</option>
</select>

用于选择数据的PHP MySQL查询：

$statements = '';
    if (isset($_POST['GenderID'])) {
         $gender_query = $_POST['GenderID'];
        $statements .= " AND `product`.`gender_id` = '$gender_query' "; //condition for each property
    }


    $query = "SELECT    `product`.`product_name` AS pname, 
                        `product`.`product_img` AS pimg,
                        `brand`.`brand_name` AS bname
            FROM
                        `product`                                           
            INNER JOIN
                        `brand`
            ON 
                        (`product`.`brand_id`=`brand`.`brand_id`)   
            WHERE 
                        `product`.`active` = '1' $statements";

  $result2 = $conn->query($query);  

                    if ($result2->num_rows > 0) {
                    // output data of each row
                       while($row = $result2->fetch_assoc()) 
                        {                       
                            echo'
                            <div class="col-lg-4">
                                <div class="card">

                                   <div class="view overlay">

                                    <a href="#">
                                        <img src="products/',$row["pimg"],'" class="img-fluid">
                                    </a>
                                        </div>

                                        <div class="card-body">
                                            <h4 class="card-title">',$row["bname"],'</h4>
                                            <p class="card-text">',$row["pname"],'</p>
                                            <a href="#" class="btn btn-outline-success my-2 my-sm-0">Button</a>
                                        </div>

                                    </div>
                                    </div>';
                                }
                            }

JS Jquery / Ajax：

$(document).ready(function(){
    $("#Gender").change(function () {
        var gender = $("#Gender").val();
        jQuery.ajax({
            type: "POST",
            data:  {GenderID: gender},
            success: function(data){ 
                if(data.success == true){ 
                   alert('success'); 
                }
            }               
        });
    });
});

这可能是我犯的最小错误。非常感谢任何帮助。

更新

我添加了执行Mysql查询的代码。

Answer 1

我认为你在这里出错了。

''中GenderID的一个小错误。而你并没有通过url。

$(document).ready(function(){
    $("#Gender").change(function () {
        var gender = $("#Gender").val();
        jQuery.ajax({
            url: "www.some_url.com"    // Send the data with your url.
            type: "POST",
            data:  {'GenderID': gender},     // Here you have written as {GenderID: gender} , not {'GenderID': gender}
            success: function(data){ 
                if(data.success == true){ 
                   alert('success'); 
                }
            }               
        });
    });
});

此外，您已将.更改为,，如下所示。

echo' <div class="col-lg-4">
          <div class="card">
                 <div class="view overlay">
                    <a href="#">
                      <img src="products/'.$row["pimg"].'" class="img-fluid">
                    </a>
                 </div>
                 <div class="card-body">
                 <h4 class="card-title">'.$row["bname"].'</h4>
                 <p class="card-text">'.$row["pname"].'</p>
                 <a href="#" class="btn btn-outline-success my-2 my-sm-0">Button</a>
           </div>
       </div>
  </div>';

Answer 2

你不会调用脚本（缺少url参数）。

$("button").click(function(){
    $.ajax({
        url: "demo_test.txt", 
        success: function(result){
        $("#div1").html(result);
    }});
});

编辑：错误处理可以显示出错了什么

$("button").click(function(){
    $.ajax({
        url: "demo_test.txt", 
        success: function(result){
        $("#div1").html(result);
            },
        error: function (error) {
            console.log(error);
        }
    });
});

Answer 3

你可以这样做！

<?php
if(isset($_POST['gender'])) {$variable = $_POST['gender'];} else {$variable=0;}
echo $variable;?>

<div id="result">

<form action="" method="POST" id="form">
<select id="gender" name="gender">
    <option value="" disabled selected>--Geslacht--</option>
    <option value="1">Man</option>
    <option value="2">Vrouw</option>
    <option value="3">Beide</option>
</select>
<button type="submit" onClick="post()">Submit</button>
</form>
</div>

<script language="JavaScript" type="text/javascript">
function post() {
var param = '&gender='+gender;
$.ajax({
url : 'pagename.php',
type : 'POST',
data : param,
dataType : 'html'
}).done(function(html) {$('#result').html(html)}) ;
}
</script>

Answer 4

您是否收到了正确的帖子数据？在通过AJAX将其解析为另一个文件后，你的post变量实际包含了什么？

引起我注意的事情，可能是一个错误，是你获取<select>的价值的方式。据我所知，你应该告诉它获得选择的选定值。

var gender = $("#Gender").val();

需要

var gender = $("select#Gender option:selected").val();

通过这种方式，你告诉jquery变量要获取什么值。

如果您在此之后仍有问题，请告诉我，如果发现任何其他错误，我会编辑我的答案。

PHP AJAX更新MySql查询onChange从下拉列表（过滤）

4 个答案: