AJAX jqueryが応答せずdivを表示しています

Question

私はデータを動的に取得して別のページに送信するシンプルなフォームのコードを用意しています。そのデータを使用して、私のページにいくつかの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 !"); 
      } 
     }); 
    }); 
}); 

フォームあなたはそれが実際に提出することができるようにbuttonからsubmitタイプに変更する必要が

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

Answer 1

。

ので変更： -

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

Answer 2

からmethod="post"を削除しますjQurtyでいくつか変更する

私はちょうどそれはあなたにだけ、それはボタンをwork.Becauseます提出する