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

我制作了一个简单的表单，通过它我可以搜索关键字并动态地从数据库中找到相关的输出。代码在没有AJAX的情况下工作得非常完美。但是现在，我已经应用了一些AJAX代码，在名为

toucon

的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>

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";
}

您应该尝试以下方法：

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

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

问题是ajax请求的值在$\u请求中是键。也许有一些方法可以处理这个问题，但这不是很直观

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

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

您应该尝试以下方法：

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

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

问题是ajax请求的值在$\u请求中是键。也许有一些方法可以处理这个问题，但这不是很直观

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

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

---

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

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

---

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

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

---

您是否尝试了success函数中的console.log，以便查看ajax请求是否成功？您的JS代码不正确。您不应该在

var myData=$（'input[name=“query”]'）.val（）之后使用
，
。使用
$（“.but”）。单击（）
而不是
$（“.but”）。提交（）
是否尝试了success函数中的console.log，以便查看ajax请求是否成功？您的JS代码不正确。您不应该在
var myData=$（'input[name=“query”]'）.val（）之后添加
，
。使用
$（.but”）。单击（）
而不是
$（.but”）。提交（）
查看我更新的ajax代码。是现在吗？仍然没有显示结果。我想让你也看看php代码，它是否正确地发送数据？看看我更新的ajax代码。是现在吗？仍然没有显示结果。我想让你也看看php代码，它正确地发送数据了吗？谢谢：）这个帮助了我：）这个帮助了我