AJAX JQuery表单只提交一次（需要页面刷新）

Question

当页面加载时我可以检索到一个结果，但是当我改变输入并尝试重新填充update_form时，我什么也收不到。有任何想法吗？当我检查参数时，浏览器正在接收新参数，但很显然，查询不会再次运行。

$(function() { 
       $("#select_form").submit(function (e) { 
        e.preventDefault(); 
        $.ajax({ 
         url: 'select_price.php', 
         data: $('#select_form').serialize(), 
         type: 'POST', 
         success: function (data) { 
          console.log(data); 

          if(data){ 
           $("#update_form").html(data); 
           $("#norecord").css('display','none'); 

          } 
          else{ 
           $("#norecord").css('display','block'); 

          } 

         }, 


        }); 

       }); 
       }); 

我的HTML

<form action="" method="post" id="select_form"><select style="max-width: 125px;border-radius:5px;" class="form-control" name="cus_no" autocomplete="off"> 
       <?php 

       $sql = "SELECT DISTINCT debcode FROM cicmpy WHERE cicmpy.region IS NOT NULL"; 
       $query = odbc_exec($conn, $sql); 
       while ($row = odbc_fetch_array($query)) { 
        echo '<option value="' . ($row['debcode']) . '">' .($row['debcode']) . ' </option>'; 
       } 


       ?> 

       </select ></div><label>Item Number</label><input style="max-width: 125px; border-radius:5px;" type="text" class="form-control" id="auto_item" name="item_no"/> 
         <button style="margin-top: 15px;" type="submit" name="update" class="btn btn-primary">Manage</button> 
         <button style="margin-top: 15px;" type="button" name="new_price" id="new_price" class="btn btn-success pull-right">New Price</button></div> 
     </div> </div> 
        </div> 
     </div> 
      </form> 

Answer 1

首先，在你的HTML，给你一个按钮和id="btn_manage"删除type="submit"，否则你只是发表形式（这就是为什么你的页面刷新），而不是使用AJAX。在你的Javascript中，摆脱$("#select_form").submit(function (e) {的东西，并简单地注册按钮本身的事件处理程序，它将运行AJAX。

更新HTML，然后试试这个：

<script> 
    $(function() { 
     $("#btn_manage").on("click", function() { 
      $.ajax({ 
       url: 'select_price.php', 
       data: $('#select_form').serialize(), 
       type: 'POST', 
       success: function (data) { 
        console.log(data); 

        if(data){ 
         $("#update_form").html(data); 
         $("#norecord").css('display','none'); 

        } else { 
         $("#norecord").css('display','block'); 

        } 

       }, 
       error: function(data) { 
        console.log("Error: " + data) 
       } 
      }); 
     }); 
    }); 

    </script> 

Answer 2

您需要绑定的提交按钮，将在未来的Ajax请求加入这样一个click事件处理程序。

$(function() { 
    $("#select_form").submit(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     url: 'select_price.php', 
     data: $('#select_form').serialize(), 
     type: 'POST', 
     success: function(data) { 
     console.log(data); 

     if (data) { 
      $("#update_form").html(data); 
      $("#norecord").css('display', 'none'); 

     } else { 
      $("#norecord").css('display', 'block'); 

     } 

     }, 


    }); 

    }); 

    //Bind click event listener to the submit button 
    $(document).on('click', 'button[type="submit"]', function() { 
     $(this).parents('form').submit(); 
    }); 
});