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

问题描述

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

I'm using AJAX for fast input validation on my login page. If everything is correct, the user is redirected.

代码如下:

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

它在所有浏览器中都运行良好.但是在 Chrome 中有一个问题.它不提供保存密码.

It works really well in all browsers. But there's a problem in Chrome. It doesn't offer to save the password.

当 JavaScript 关闭时，密码会被保存，所以问题肯定是重定向到一个新位置.

When JavaScript is turned off, the password is saved, so the problem is definitely in redirection to a new location.

我该如何解决?

推荐答案

我找到了一个解决这个问题的肮脏的方法，通过插入一个不可见的 iframe 并将表单定位到它:

I have found a dirty workaround for this problem, by inserting an invisible iframe and targeting the form to it:

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

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

对应的 JavaScript:

The corresponding JavaScript:

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

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

The trick is, that there are really two requests made. First the form gets submitted to /blank.html, which will be ignored by the server, but this triggers the password save dialog in Chrome. Additionally we make an ajax request and submit the real form to /login. Since the target of the first request is an invisible iframe the page doesn't refresh.

如果您不想重定向到另一个页面，这当然更有用.如果您无论如何都想重定向，则更改操作属性是更好的解决方案.

This is of course more useful if you don't want to redirect to another page. If you want to redirect anyway changing the action attribute is a better solution.

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

Here is a simple JSFiddle version of it. Contrary to claims in the comment section, there is no reload of the page needed and it seems to work very reliably. I tested it on Win XP with Chrome and on Linux with Chromium.

这篇关于如何让 Chrome 记住 AJAX 表单的密码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！