javascript 通过 AJAX 提交表单而无需重新加载页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11882444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Submit form without reloading page through AJAX
提问by Kashif Umair Liaqat
Is there any way to submit the form to server for an AJAX response without reloading the page. I am able to do this with submit button. But how can I do that when a link is clicked.
有什么方法可以在不重新加载页面的情况下将表单提交给服务器以获得 AJAX 响应。我可以用提交按钮来做到这一点。但是当点击链接时我怎么能做到这一点。
I came to know about a javascript method to do this,
我开始知道一个 javascript 方法来做到这一点，
var form = document.getElementById('myForm');
form.submit();
But the above code reloads the page. I came to know that we can do this with jquery but how?
但是上面的代码会重新加载页面。我开始知道我们可以用 jquery 做到这一点，但如何做到这一点？
Please Note that I am developing my application in Ruby on Rails 3.0.4 and I am using the rails AJAX like this.
请注意，我正在 Ruby on Rails 3.0.4 中开发我的应用程序，并且我正在使用这样的 rails AJAX。
<%= form_for @search, :remote => true, :url => request_path, :html => {:method => :get, :id => :my_form} do |f| %>
Any help would be appreciated.
任何帮助，将不胜感激。
采纳答案by Kashif Umair Liaqat
I got it working by just using this code. No need to define a function inside submit.
我只使用这段代码就让它工作了。无需在提交中定义函数。
$('#myform').submit();
回答by undefined
You can use the preventDefault()method of eventobject :
您可以使用object的preventDefault()方法event：
$('#myForm').submit(function(event){
event.preventDefault();
$.ajax({
...
});
})
If this method is called, the default action of the event will not be triggered.
如果调用此方法，则不会触发事件的默认动作。
回答by Nope
You can use .post()to do an ajax post.
您可以使用.post()进行 ajax 发布。
Taken from the documentation:
取自文档：
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
You could also use .submit()
你也可以使用.submit()
Taken from documentation:
取自文档：
$('#target').submit(function() {
alert('Handler for .submit() called.');
return false;
});
Now when the form is submitted, the message is alerted. This happens prior to the actual submission, so we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler.
现在，当提交表单时，消息会收到警报。这发生在实际提交之前，因此我们可以通过在事件对象上调用 .preventDefault() 或从我们的处理程序返回 false 来取消提交操作。
You can combine the 2 as shown by Raminson:
您可以将 2 组合起来，如下所示Raminson：
$('#target').submit(function() {
.preventDefault()
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
});
回答by Alex
I know i am a bit late to the party, as an alternative to the above anwsers, you could use the jQuery Form pluginfor easy ajax form updating.
我知道我参加聚会有点晚了，作为上述 anwsers 的替代方案，您可以使用jQuery Form 插件来轻松更新 ajax 表单。
If you used it, the most simple version of your JS code would look like this.
如果您使用它，那么您的 JS 代码的最简单版本将如下所示。
$('#myform').ajaxForm(function() {
success: alert('success');
});
There are many more options you can use to configure it how you like.
The url that the form is submitted to is the same as the actionattribute of your form.
您可以使用更多选项来根据自己的喜好进行配置。表单提交到的 url 与表单的action属性相同。
This can also be changed.
这也可以改变。
From my exprecience you do not need to preventDefault()the submit either, it does it for you.
根据我的经验，您也不需要preventDefault()提交，它会为您完成。
Anyways, this is another alternative to your problem, if you find it convenient.
无论如何，如果您觉得方便，这是您问题的另一种选择。
回答by Onheiron
If the problem is your page reloading with form.submit() try:
如果问题是您的页面使用 form.submit() 重新加载，请尝试：
var form = document.getElementById('myForm');
form.submit(function(e){
e.preventDefault();
//an ajax post as in Fran?ois Wahl answer
});
