php ajax更新mysql query onchange from下拉列表(过滤)

gk7wooem  于 2021-06-21  发布在  Mysql
关注(0)|答案(4)|浏览(294)

我在使用php和ajax更新产品页面时遇到了问题。现在,当我从下拉菜单中选择一个项目时,它不会更新查询。查询本身工作正常。
我想要的是:当用户从多个下拉菜单中选择不同的选项时,查询将通过ajaxpost请求进行更新。因此,结果将通过选择下拉列表进行过滤。
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查询的代码。

k2arahey

k2arahey1#

不能调用脚本(缺少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);
        }
    });
});
ubby3x7f

ubby3x7f2#

我认为你在这里出了问题。
一个小小的错误 ''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>';
bfnvny8b

bfnvny8b3#

你可以那样做!

<?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>
3lxsmp7m

3lxsmp7m4#

你得到正确的post数据了吗?通过ajax将post变量解析到另一个文件后,post变量实际上包含什么?
吸引我注意的一件事,可能是一个错误,就是你获取你的价值的方式 <select> . 据我所知,你应该告诉它得到select的selected值。

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

必须是

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

这样,您就告诉jquery变量要获取什么值。
如果你仍然有问题,让我知道,我会编辑我的答案,如果我发现任何其他错误。

相关问题