通过 AJAX 提交表单而不重新加载页面

Question

有什么方法可以在不重新加载页面的情况下将表单提交到服务器以获得 AJAX 响应。我可以使用提交按钮来做到这一点。但是当一个链接被点击时，我该怎么做呢。

我知道了一种 javascript 方法可以做到这一点，

var form = document.getElementById('myForm');
form.submit();

但是上面的代码会重新加载页面。我知道我们可以用 jquery 来做到这一点，但是如何呢？

请注意，我正在使用 Ruby on Rails 3.0.4 开发我的应用程序，并且我正在使用这样的 Rails AJAX。

<%= form_for @search, :remote => true, :url => request_path, :html => {:method => :get, :id => :my_form} do |f| %>

任何帮助将不胜感激。

Answer 1

你可以使用event对象的preventDefault()方法：

$('#myForm').submit(function(event){
   event.preventDefault(); 
   $.ajax({
     ...
   });
})

如果调用此方法，则不会触发事件的默认动作。

Answer 2

您可以使用.post() 进行 ajax 发布。

取自文档：

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

你也可以使用.submit()

取自文档：

$('#target').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});

现在，当提交表单时，会发出警告消息。有时候是这样的 在实际提交之前，所以我们可以取消提交动作 在事件对象上调用 .preventDefault() 或返回 false 来自我们的处理程序。

你可以像Raminson显示的那样组合2：

$('#target').submit(function() {
    .preventDefault()
    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        success: success,
        dataType: dataType
    });
});

Answer 3

我知道我参加聚会有点晚了，作为上述答案的替代方案，您可以使用 jQuery Form plugin 轻松更新 ajax 表单。

如果你使用它，你的 JS 代码最简单的版本应该是这样的。

$('#myform').ajaxForm(function() { 
  success: alert('success');
});

您可以使用更多选项来配置它。 表单提交到的 url 与表单的 action 属性相同。

这也可以更改。

根据我的经验，您也不需要preventDefault() 提交，它会为您完成。

无论如何，如果您觉得方便，这是您问题的另一种选择。

Answer 4

如果问题是您的页面使用 form.submit() 重新加载，请尝试：

var form = document.getElementById('myForm');
form.submit(function(e){

    e.preventDefault();

    //an ajax post as in François Wahl answer

});

Answer 5

我仅使用此代码就可以正常工作。无需在 submit 中定义函数。

$('#myform').submit();