使用按鈕的Ajax表單提交

似乎有幾乎相同的問題的答案很多，但我似乎無法解決這個問題。請原諒我，如果你已經看到這一千倍：使用按鈕的Ajax表單提交

我有一個表格我需要提交使用ajax，但我不能讓它做得很好。它需要submt，而不是刷新（如你所期望的那樣），但它似乎並不重要，我所能做的就是將POST附加到頁面的當前URL。我已經將表格剝離到了最低限度，並且仍然得到了這個結果，所以我一定在做一些非常錯誤的事情。任何幫助表示讚賞，謝謝！

<html> 
    <body> 
     <form class="form horizontal" id="logForm"> 
      <fieldset> 
       <div class="control-group"> 
        <div style="float: left"> 
         <label for="from">Start Date: </label> 
         <div class="controls"> 
          <input type="text" id="from" name="from" /> 
         </div> 
         <label for="to">End Date:</label> 
         <div class="controls"> 
          <input type="text" id="to" name="to" /> 
         </div> 
        </div> 
       </div> 
      </fieldset> 

      <div class="form-actions"> 
       <button type="submit" class="btn btn-primary" id="subButton" style="float: left">Search!</button> 
      </div> 
     </form> 
     <script> 
      $("#logForm").submit(function() { 
       $.ajax({ 
        url: 'logQuery.php', 
        type: 'get', 
        dataType: 'json', 
        data: $('form#logForm').serialize(), 
        success: function(html) { 
        alert('worked good'); 
        return false; 
        } 
       }); 
      }); 
     </script> 
    </body> 
</html>

來源

2013-07-03 lorsungcu

更改您的腳本添加就緒，並在適當的行上返回false。當異步操作完成時，您可能會在函數返回後執行return false。這就是爲什麼你不能阻止提交事件的標準行爲。

返回應該在submit()函數內。

提示：

你並不需要使用form#logForm，因爲只有一個使用id = logForm元素（應該至少）#logForm就夠了。

當您將事件綁定到元素時，還總是使用document.ready。這將確保您確定網站上的所有元素都已加載，以便您可以將事件綁定到它們。

您也可以使用preventDefault()，但return false也不錯。

$(function(){ 
     $("#logForm").submit(function() { 
      $.ajax({ 
       url: 'logQuery.php', 
       type: 'get', 
       dataType: 'json', 
       data: $('form#logForm').serialize(), 
       success: function(html) { 
       alert('worked good'); 
       } 
      }); 
      return false; 
     }); 

});

來源

2013-07-03 07:00:43 Robert

非常感謝;這使得各種各樣的感覺。真的很感激它。 – lorsungcu

不客氣:) – Robert

使用按鈕的Ajax表單提交

回答

相關問題