AJAX jquery 没有响应并显示 div答案

【问题标题】：AJAX jquery not responding and showing divsAJAX jquery 没有响应并显示 div
【发布时间】：2017-05-23 10:34:55
【问题描述】：

我编写了一个简单的表单，在该表单中动态检索数据，然后将其发送到另一个页面。使用该数据，我希望在我的页面上显示一些 div。当我在不使用 AJAX 的情况下简单地检查它时，它正在返回 div。但是现在我已经应用了一些 AJAX 并且它不起作用。请有任何建议。

AJAX

$("document").ready(function() {
    $("#search_keyword").on("submit", function (e) {
        e.preventDefault();
        $.post("keyword_search.php?query="+encodeURIComponent($("#keyword").val())+"category="+encodeURIComponent($("#category").val())+"store="+encodeURIComponent($("#store").val()), function (data) {
            var res = JSON.parse(data);
            if (res.divs) {
                $('#search_result').html("");
                for (var i = 0; i < res.divs.length; i++) {
                    $('#search_result').append(res.divs[i]);
                }
            } else {
                $('#search_result').html("No matched coupons found !");
            }
        });
    });
});

表格

<form class="form-horizontal select-search" id="search_keyword" method="post">
    <label class="control-label ">Keyword</label>
    <input class="form-control" id="keyword" name="keyword" type="text">
    <!-- Select Category -->
        <label class="control-label " for="category">Select category</label>
        <select class="category" id="category" name="category">
            <?php 
                $sm=mysqli_query($con,"select * from categories ");
                while ($row1 = mysqli_fetch_array($sm,MYSQLI_ASSOC)){
                    $cat_id = $row1['cat_id'];
                    $name = $row1['cat_name'];
                    echo '<option value="' . $cat_id . '">' . $name . '</option>';
                }  
            ?>
        </select>

    <label class="control-label " for="store">Select a store</label>
    <select class="storesname" id="store" name="store">
      <option selected="selected">Select Stores</option>
   </select>
   <button id="search_btn" name="search_btn" class="btn btn-danger">Search coupons</button>
</form>

<div id="search_result"> </div>

【问题讨论】：

更改按钮以提交然后只有它会起作用。因为按钮从不提交表单
<button id="search_btn" name="search_btn" class="btn btn-danger" type="submit">Search coupons</button>
仍然没有响应。我认为ajax发布有问题
@tabia 检查我的答案并查看注释

标签： javascript jquery html css ajax

【解决方案1】：

你需要把button的类型改成submit才能真正提交。

所以改变：-

<button id="search_btn" name="search_btn" class="btn btn-danger">Search coupons</button>

收件人：-

<input type="submit" id="search_btn" name="search_btn" class="btn btn-danger" value="Search coupons"/>

注意：- 确保在您的脚本代码之前添加了 jQuery 库，以便它能够正常工作。

如下更改您的代码：-

$("document").ready(function() {
    $("#search_keyword").on("submit", function (e) {
        e.preventDefault();
        var data = {'query':encodeURIComponent($("#keyword").val()),'category':encodeURIComponent($("#category").val()),'store':encodeURIComponent($("#store").val())};
        $.post("keyword_search.php",data, function (data) {
            var res = JSON.parse(data);
            if (res.divs) {
                $('#search_result').html("");
                for (var i = 0; i < res.divs.length; i++) {
                    $('#search_result').append(res.divs[i]);
                }
            } else {
                $('#search_result').html("No matched coupons found !");
            }
        });
    });
});

在您的keyword_search.php 中检查如下：-

<?php
echo "<pre/>";print_r($_POST); //check that how post data are coming
// rest do code accordingly
?>

同时从您当前的 <form> 中删除 method="post"

【讨论】：

@Alvie 仍然没有帮助我
@tabia 很高兴为您提供帮助:):)

【解决方案2】：

你只是在 jQuery 中改变一些东西。

我刚刚将“提交”更改为“点击”，将“#search_keyword”更改为“#search_btn”

$("document").ready(function() {
  $("#search_btn").on("click", function (e) {
  e.preventDefault();
  $.post("keyword_search.php?query=" + encodeURIComponent($("#keyword").val())+encodeURIComponent($("#category").val())+encodeURIComponent($("#store").val()), function (data) {
   var res = JSON.parse(data);
   if (res.divs) {
   $('#search_result').html("");
    for (var i = 0; i < res.divs.length; i++) {
     $('#search_result').append(res.divs[i]);
      }
     } else {
      $('#search_result').html("No matched coupons found !");
    }
            });
        });
    });

也许对你有帮助

【讨论】：