jQuery AJAX 表单提交不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2722850/
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
jQuery AJAX form submission not working
提问by DisgruntledGoat
I'm trying to submit a form through AJAX instead of using the normal POST submission. The HTML is just a standard form with method="post"and my jQuery code is as follows:
我正在尝试通过 AJAX 提交表单，而不是使用普通的 POST 提交。HTML 只是一个标准形式，method="post"我的 jQuery 代码如下：
jQuery.noConflict();
jQuery(document).ready( function($) {
var $form = $('#default_contact');
$form.submit( function() {
$.ajax({
type: 'POST',
url: $form.attr( 'action' ),
data: $form.serialize(),
success: function( response ) {
console.log( response );
}
});
return false;
});
});
(Based on this answer)
（基于这个答案）
I'm returning false from the submit function, but the form is still getting submitted and I can't figure out why. Not getting any Firebug errors.
我从提交函数返回 false，但表单仍在提交，我不知道为什么。没有收到任何 Firebug 错误。
回答by parserr
your code works fine if html is setup right. here's my test html (with php), so you can compare to your own.
如果 html 设置正确，您的代码就可以正常工作。这是我的测试 html（使用 php），因此您可以与自己的进行比较。
<?php
if (!empty($_POST)) {
die("<pre>" . print_r($_POST, true) . "</pre>");
}
?>
<html>
<head>
<title>ajax submit test</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function ($) {
var $form = $('#default_contact');
$form.submit(function () {
$.ajax({
type: 'POST',
url: $form.attr('action'),
data: $form.serialize(),
success: function (response) {
alert(response);
}
});
return false;
});
});
</script>
</head>
<body>
<form id="default_contact" action="formsubmit.php" method="post">
<input type="hidden" value="123" name="in1" />
<input type="hidden" value="456" name="in2" />
<input type="submit" value="send" />
</form>
</body>
</html>
回答by Tim
If you have your html set up so that the form works all on its own, then it will act just as a normal form without the jquery. So take out the action attribute from the html, and change your jquery to:
如果您设置了 html 以便表单完全独立工作，那么它就像没有 jquery 的普通表单一样。因此，从 html 中取出 action 属性，并将您的 jquery 更改为：
url: your-submit-file.php,
If that doesn't work, try:
如果这不起作用，请尝试：
jQuery(document).ready( function($) {
var $form = $('#default_contact');
$form.submit( function(event) {
$.ajax({
type: 'POST',
url: your-submit-file.php,
data: $form.serialize(),
success: function( response ) {
console.log( response );
}
});
event.preventDefault;
return false;
});
Also, have you tried jQuery's $.post() ? It's much easier to use...
另外，您是否尝试过 jQuery 的 $.post() ？使用起来要容易得多...
回答by Tom Beech
i had a similar problem- my problem was that during a form post, i was using $("form").submit to do something before the page submitted. this something included a jquery post action. unfortunatley, the post action wouldnt complete before the form post completed, and thus caused problems later- my code looked like this:
我有一个类似的问题 - 我的问题是在表单发布期间，我使用 $("form").submit 在页面提交之前做一些事情。这包括一个 jquery post 操作。不幸的是，在表单发布完成之前，发布操作无法完成，因此后来导致了问题 - 我的代码如下所示：
$("form").submit(function () {
var result =
$.post('/Controller/Action',
{ data: array.toString() }
});
The solution was to
解决办法是
event.preventDefault;
immediately before return true, which stops the form posting until the ajax call has completed.
在 return true 之前立即停止表单发布，直到 ajax 调用完成。
