发送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');
                    }
                });
        });
    });

result.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

不要使用click事件，而按钮不包含Submit事件-请使用表单的Submit事件

$("#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
  });  
});

Answer 2

您应该尝试：

var myData={ query: $( 'input[name="query"]' ).val() };

因此，您可以在服务器上获取查询字段。

问题是您的ajax请求确实将您的值作为$ _REQUEST中的键。 可能有一些方法可以解决此问题，但这不是很直观。

正确的是，您应该在表单上而不是按钮上注册提交处理程序。

$("#search_form").submit(function(event){ ... }