javascript - 将php响应发送到ajax并在div中显示结果

Question

我制作了一个简单的表单，通过它我可以搜索关键字并动态地从数据库中查找相关输出。该代码无需 AJAX 即可完美运行。但现在我已经应用了一些 AJAX 代码来在名为 coupon 的 div 内的同一页面上获取响应。我无法得到答复。我不知道我哪里做错了。有什么建议请。这是完整的代码。

表单

<form action="" id="search_form" method="POST">
<p><input name="query" autocomplete="off" id="list_search" type="search" required class="list_search" /></p>
<p align="center"><input type="submit" id="click" name="click" class="but" value=" search"  /></p>
</form>
<div class="coupons"></div>

AJAX

$("document").ready(function(){
       // $(".but").click(function(event){  // here
        $("#search_form").submit(function (event) {

         {
            event.preventDefault();

           var myData={ query: $( 'input[name="query"]' ).val() };
                $.ajax({
                    url: 'result.php',
                    data: myData,
                    type: 'post',
                    dataType: "html",
                    success: function(result){
                        //console.log(result);
                        $('.coupons').html(result);
                    },
                    error: function() {
                        alert('Not OKay');
                    }
                });
        });
    });

结果.php

 $keyword = mysqli_real_escape_string($con,$_REQUEST['query']); // always escape
 $keys = explode(" ", $keyword);
 $sql="SELECT  c.* , sc.* , sm.* ,ca.* from store_category sc INNER JOIN store_manufacture sm ON sm.sm_id=sc.store_id INNER JOIN categories ca ON ca.cat_id=sc.cat_id INNER JOIN coupons c on c.c_sc_id=sc.sc_id WHERE c.c_name LIKE '%$keyword%' OR sm.sm_brand_name LIKE '%$keyword%' OR ca.cat_name LIKE '%$keyword%' OR c.c_description LIKE '%$keyword%'";

foreach ($keys as $k) {

    $sql.="OR c.c_name LIKE '%$k%' OR sm.sm_brand_name LIKE '%$k%' OR ca.cat_name LIKE '%$k%' OR c.c_description LIKE '%$k%'";
}

$result = mysqli_query($con, $sql);
$count=mysqli_num_rows($result);
if($count!=0) {
    while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {

       $res=$row['c_name'].$row['c_description'];
        echo json_encode($res);
    }
}
else
{
    echo "no result";
}

Answer 1

不要使用点击事件，并且按钮没有提交事件 - 使用表单的提交事件

$("#search_form").on("submit",function(e) { 
  e.preventDefault();
  $.post("result.php?query="+encodeURIComponent($("#list_search").val()),function(data) {
    $('.coupons').html(data); // you likely need to render the JSON instead here or send HTML from server
  });  
});