如何让 Chrome 记住 AJAX 表单的密码? [英] How to make Chrome remember password for an AJAX form?

问题描述

我在登录页面上使用 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 表单的密码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！