使用按钮的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>

答

更改您的脚本添加就绪，并在适当的行上返回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; 
     }); 

});

非常感谢;这使得各种各样的感觉。真的很感激它。 – lorsungcu

不客气:) – Robert

使用按钮的Ajax表单提交

相关推荐