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

有没有办法将表单提交给服务器以获取AJAX响应而无需重新加载页面。 我可以使用提交按钮执行此操作。 但是，如果单击链接，我该怎么做呢。

我开始知道一个javascript方法来做到这一点，

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

但上面的代码重新加载页面。 我开始知道我们可以用jquery做到这一点，但是怎么样？

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

  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（）来做一个ajaxpost。

取自文档：

 $.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();