提交表单而无需通过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

我知道我有点迟到了，作为上述anwsers的替代品，你可以使用jQuery Form插件轻松进行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

我只是使用这段代码就可以了。 无需在提交内定义函数。

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