jQuery Ajax - 如何在检查字段后继续提交表单

Question

我是Ajax和Jquery的新手，想在登录页面上执行一些验证（使用WordPress）。

我使用以下代码来捕获登录表单的提交...

$("#login").submit(function (e) {
    $.ajax({
        type: "post",
        dataType: 'json',
        url: ajax_login_object.ThemeFolder + "/log-in-script.php",
        data: {
            'user_login': user_login,
                'user_pass': user_pass,
                'action': 'login'
        },
        success: function (data) {
            if (data.succeeded == true) {
                // JUST WANT TO SUBMIT THE FORM HERE
                // tried return true.. no joy
                // tried $("#login").submit() but just ends up with neverending loop
                // tried document.href etc but lose the POST data
                // tried nesting another ajax call but no joy
                // ????
            }
        }
    });
    e.preventDefault();
});

在我的log-in-script.php文件中，我检查了一些内容。例如，如果他们没有填写密码字段但是他们的用户名在数据库中，我会重置他们的密码。如果他们没有填写密码字段并且他们的用户名不在数据库中，那么我将注册他们。

如果他们输入了用户名和密码，我只想正常地提交表单，但我不知道该怎么做。我肯定是错过了一些非常简单的东西。

非常感谢任何帮助。

谢谢

John ;-)

- John T

---

你需要将ajax()调用附加到另一个事件上，比如按钮按下事件，然后手动触发表单的submit()。现在你可以看到你是如何陷入循环中的。 - Rory McCrossan

为什么要将这个逻辑与普通表单提交分开呢？另外，你的密码重置逻辑可能会带来风险.. 人们有时会忘记输入密码，而你也可能会因此打开脚本重置所有人的密码的漏洞.. - Jason P

Rory，你能否再详细解释一下你的回答吗？我可以使用哪些其他事件来启动ajax调用呢？而你所说的“手动触发表单的submit()”是什么意思？对于这个问题我很抱歉不太了解。;-) - John T

@JohnT，你是否正确地写出了“#login”？它是<form id="login">吗？ - Luca Rainone

这正是我做错的地方@chumkiu，对于造成的混淆我道歉。今天真是漫长的一天！非常感谢你的帮助。;-) - John T

Answer 1

尝试

$("#login")[0].submit()

直接在表单元素上调用 submit() 方法，避免调用提交事件回调函数。

示例：http://jsfiddle.net/5Xv5f/1/

更新：

对于大多数浏览器以及所有基于 Gecko 的应用程序都是如此：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.submit

从基于 Gecko 的应用程序中调用此方法时，表单的 onsubmit 事件处理程序（例如，onsubmit="return false;"）将不会被触发。一般情况下，HTML 用户代理不能保证会调用此方法。

然而，W3 标准中没有关于此的规定。

因此，如果您想要100%确定，可以像这样做：

$("#login").submit(function (e) {

    // submit if already checked
    if($(this).attr("data-checked")) {
          return true;
    }

    $.ajax({
        type: "post",
        dataType: 'json',
        url: ajax_login_object.ThemeFolder + "/log-in-script.php",
        data: {
            'user_login': user_login,
                'user_pass': user_pass,
                'action': 'login'
        },
        success: function (data) {
            if (data.succeeded == true) {
                // JUST WANT TO SUBMIT THE FORM HERE

                // flag as checked
                $("#login").attr("data-checked","1");

                // submit
                $("#login").submit()            
            }
        }
    });
    e.preventDefault();
});

DEMO http://jsfiddle.net/AEJ6S/

- Luca Rainone

---

无论是在 jQuery 对象上调用还是在 DOM 元素上本地调用，事件都是相同的，因此这样做不起作用。 - Rory McCrossan

@RoryMcCrossan 事件没有被触发（http://jsfiddle.net/5Xv5f/）（或者我没有理解问题）。 - Luca Rainone

可以了。我之前错误地使用了 #login（包含表单的 div），而不是 #loginform（实际的表单）。感谢 Rory 和 chumkiu 的帮助；-) - John T

@chumkiu 很不幸，我仍然遇到了问题。表单确实可以正确提交，但它没有传递POST数据（我猜测是因为使用了这种方法“重新提交”表单）。有没有办法同时保留POST数据呢？再次感谢。;-) - John T

@JohnT POST数据应该被保留。错误应该出现在其他地方。 :) （method="POST"？） - Luca Rainone