Question

我正在使用AJAX在我的登录页面上进行快速输入验证。如果一切正确，则会重定向用户。

以下是代码：

$(form).submit(function () {
    $.post($(this).attr('action'), $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            window.location = data.redirectUrl;
        }
   }
...

它适用于所有浏览器。但是Chrome中存在问题。它不提供保存密码。

当JavaScript关闭时，密码会被保存，因此问题肯定是重定向到新位置。

我该如何解决？

Answer 1

通过插入不可见的iframe并将表单定位到该问题，我找到了解决此问题的肮脏方法：

<iframe src="/blank.html" id="loginTarget" name="loginTarget" style="display:none">
</iframe>

<form id="loginForm" action="/blank.html" method="post" target="loginTarget"></form>

相应的JavaScript：

$('#loginForm').submit(function () {
    $.post('/login', $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            window.location = data.redirectUrl;
        }
    })
})

诀窍是，确实有两个请求。首先将表单提交到/blank.html，服务器将忽略该表单，但这会触发Chrome中的密码保存对话框。另外，我们发出ajax请求并将真实表单提交给/ login。由于第一个请求的目标是不可见的iframe，因此页面不会刷新。

如果您不想重定向到其他页面，这当然更有用。如果你想重定向，改变动作属性是一个更好的解决方案。

修改

这是一个简单的JSFiddle版本。与评论部分中的声明相反，不需要重新加载页面，它似乎非常可靠地工作。我在使用Chrome的Win XP和使用Chromium的Linux上进行了测试。

Answer 2

您是否可以将表单的action值更改为data.redirectUrl并让表单照常提交？这应该会触发浏览器提示保存用户名和密码。

$(form).submit(function () {
    $.post($(this).attr('action'), $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            $("form#name").attr('action', data.redirectUrl);
        }
    }
...

Answer 3

请在此处阅读 - why doesn't chrome recognize this login form?。

重要的评论是：

是的，删除时它不起作用返回false。你需要重写你的代码。 Chrome不提供从不是的表单中保存密码 “已提交”作为安全功能。如果您想要保存密码功能工作，你将不得不放弃整个花哨的AJAX登录。

因此，您可以考虑删除Ajax，只是让表单帖子登录，这可能是没有启用JavaScript的用户也可以使用您的表单登录的唯一方法。

Answer 4

我已经用这种方式解决了它：

<form action="/login"></form>

JavaScript：

$(form).submit(function () {
   if(-1 !== this.action.indexOf('/login')) {
      var jForm = $(this);
      $.post(this.action, $(this).serialize(), function (data) {
         if (data.status == 'SUCCESS') {

            // change the form action to another url
            jForm[0].action = data.redirectUrl;

            // and resubmit -> so, no AJAX will be used 
            // and function will return true
            jForm.submit();
         }
      });
      return false;
   }
}

Answer 5

在我的情况下，Chrome不记得密码，因为在一种形式中有两种不同类型密码的输入（以一种形式创建/登录）。我的案例中的问题是通过使用javascript操作来删除其中一个类型为password的输入来解决的，这样浏览器就可以决定哪些提交的字段包含凭证数据。

Answer 6

我发现用户名和密码输入字段必须设置名称标签，以便Chrome提供保存密码。 This thread是关于简单形式的，但同样修复了我的jquery AJAX表单提交。

Answer 7

从昨天，2013年7月10日，Chrome 28，它现在可以毫无诡计。似乎他们解决了......

Answer 8

所以现在在2019年，我们可以使用凭据管理API。

注意：这是实验性的API！ 检查以下内容：https://developers.google.com/web/fundamentals/security/credential-management/save-forms

基本代码：

function onSubmit() {
    makeAjaxLoginRequest()
    .then((status) => {
        if (status.success) {
            if (window.PasswordCredential) {
                var cr = new PasswordCredential({ id: login, password: password });
                return navigator.credentials.store(cr);
            } else {
                return Promise.resolve();
            }
        }
    }).then(
        () => { // redirect || hide login window, etc... },
        () => { // show errors, etc... }
    )
}

Answer 9

我遇到了同样的问题-如何强制浏览器存储AJAX请求的用户凭据。请在这里查看我的答案-https://stackoverflow.com/a/64140352/994289。

希望有帮助。至少对Windows上的Chrome来说，它对我来说工作正常。

如何让Chrome记住AJAX表单的密码？

9 个答案: