无法通过 onSubmit 属性触发的 Ajax 响应阻止表单提交。
Posted
技术标签:
【中文标题】无法通过 onSubmit 属性触发的 Ajax 响应阻止表单提交。【英文标题】：Cannot block the form submission with Ajax response fired by onSubmit attribute. 【发布时间】：2012-01-19 20:36:11 【问题描述】：这个问题与已经回答的问题有点不同......
我要做的是运行一个函数autoHide()，它调用一个php文件artistdo.php，在表单提交时执行一个mysql查询，如果它返回true（查询成功），表单未提交。
我得到的是 MySQL 查询没有运行，即使我删除查询并将 return true 放在 artistdo.php 页面中，ajax 中的 return false 也不会停止表单提交，但它确实会导致调用alert("Success");，但是，如果我在autoHide() 函数内但在AJAX 之外放置return false，则表单不会正确提交。到目前为止，这是我所拥有的：
表单页面：
<head>
function autoHide()
$.ajax(
'url': '/artistdo.php',
'type': 'GET',
'dataType': 'json',
'data':
cmd: 'autoHideProduct'
,
'success': function ()
alert("Success");
return false;
);
</head>
<body>
<form action="http://off-site/form.php" method="post"
onSubmit="return autoHide()">
<input type="submit" value="submit"
onMouseOver="this.style.cursor='pointer'">
</form>
还有artistdo.php页面（为了方便阅读，这里是简化版）：
if($get['cmd'] == 'autoHideProduct')
$query = mysql_query("UPDATE products SET house='0'");
if ($query)
return true;
else
return false;
所以，如果我从 artistdo.php 页面中完全删除整个 MySQL 查询并将其替换为除 return true; 之外的任何内容，表单仍会提交，这让我认为问题出在 AJAX 中，因为 artistdo.php page 肯定会返回 true，并且正在调用 alert("Success");。
如果我将 return true 移到 AJAX 调用之外，则表单不会正确提交。
我希望这是有道理的......
感谢您的帮助！
【问题讨论】：
【参考方案1】：如果我理解正确，这可能会有所帮助
$('form').submit(function (event)
event.preventDefault();
//handle the rest of the logic
这将停止表单提交，如果返回为真，你应该调用你的函数并提交表单。
【讨论】：
我尝试使用它，它会起作用，但是当我尝试通过 javascript 提交表单时，我遇到了函数不断重复自身的问题，该问题通过添加以下 Darin Dimitrov 回复中的一些代码来修复.谢谢！【参考方案2】：鉴于您当前的代码结构，第一个问题是对 $.ajax 的调用是异步的，这意味着它会被执行，然后浏览器会继续执行下一条语句并让 $.ajax 调用“在后台”完成.这就是为什么当您将 return false 语句放在 $.ajax 调用之后，表单不会提交，而不是将 return false 放在 $.ajax 调用的成功函数中。
除非您创建某种全局变量，否则我认为您真正想做的事情是不可能的。您是否可以更改表单的处理方式？
【讨论】：
这将是解决问题的最简单和最直接的方法，但我可以解决问题。感谢您的回复！【参考方案3】：我认为问题出在这一行
if($get['cmd'] == 'autoHideProduct')
应该是这样的
if($_GET['cmd'] == 'autoHideProduct')
【讨论】：
我很抱歉我没有提到我有：foreach($_GET as $key => $value) $get[$key] = filter($value); 在我的 Artistdo.php 页面的顶部，所以$get 是正确的。感谢您的回复。【参考方案4】：
您可以使用.data() 方法将元数据与表单相关联，这样您就可以知道是否应该提交它：
<head>
<script type="text/javascript">
$(function()
$('#myform').submit(function()
if ($(this).data('shouldSubmit'))
return true;
$.ajax(
url: '/artistdo.php',
type: 'GET',
dataType: 'json',
context: this,
data: cmd: 'autoHideProduct' ,
success: function (result)
if (result)
$(this)
.data('shouldSubmit', true)
.submit();
);
return false;
);
);
</script>
</head>
<body>
<form action="http://off-site/form.php" method="post" id="myform">
<!-- Form fields -->
<input type="submit" value="submit" onMouseOver="this.style.cursor='pointer'">
</form>
</body>
【讨论】：
非常感谢您的回复！我不得不删除成功的“结果”部分，但效果很好！再次感谢。我会投票，但我是新手，还没有代表。以上是关于无法通过 onSubmit 属性触发的 Ajax 响应阻止表单提交。的主要内容，如果未能解决你的问题，请参考以下文章
表单 OnSubmit 等待 jQuery Ajax 返回？