php - 无法通过 onSubmit 属性触发的 Ajax 响应阻止表单提交。

Question

这个问题与已经回答的问题有点不同......

我要做的是在表单提交时运行一个函数，autoHide()它调用一个 PHP 文件，artistdo.php执行 MySQL 查询，如果它返回 true（查询成功），则表单不会提交。

我得到的是 MySQL 查询没有运行，即使我删除了查询并将 return true 放在artistdo.php页面中，ajax 中的 return false 也不会停止表单提交，但它确实会导致alert("Success");被调用，但是，如果我将 return false 放在autoHide()函数内但在 AJAX 之外，则表单不会正确提交。这是我到目前为止所拥有的：

表单页面：

<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;
    }

所以，如果我从页面中完全删除整个 MySQL 查询artistdo.php并将其替换为除了之外return true;，表单仍然提交，这让我认为问题出在 AJAX 中，因为artistdo.php页面肯定返回 true 并且alert("Success");正在被调用。如果我将移到return trueAJAX 调用之外，则表单不会正确提交。

我希望这是有道理的...

谢谢你的帮助！

score 2 · Accepted Answer

您可以使用该.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>

score 0 · Accepted Answer

如果我理解正确，这可能会有所帮助

$('form').submit(function (event)
{
    event.preventDefault();
    //handle the rest of the logic
}

这将停止表单提交，如果返回为真，您应该调用您的函数并提交表单。

score 0 · Accepted Answer

鉴于您当前的代码结构，第一个问题是调用$.ajax是异步的，这意味着它会被执行，然后浏览器继续执行下一条语句并让$.ajax调用“在后台”完成。这就是为什么当您return false在调用之后放置语句时$.ajax，表单不会提交，而不是将 return false 放在$.ajax调用的成功函数中。

除非您创建某种全局变量，否则我认为您想做的事情实际上是不可能的。你是否可以改变你做表格的方式？

score 0 · Accepted Answer

我认为问题出在这一行

    if($get['cmd'] == 'autoHideProduct') {

它应该像

    if($_GET['cmd'] == 'autoHideProduct') {

php - 无法通过 onSubmit 属性触发的 Ajax 响应阻止表单提交。

4 回答 4

Related