jQuery 如何让 Chrome 记住 AJAX 表单的密码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5430129/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Chrome remember password for an AJAX form?
提问by Alex
I'm using AJAX for fast input validation on my login page. If everything is correct, the user is redirected.
我在登录页面上使用 AJAX 进行快速输入验证。如果一切正确，用户将被重定向。
Here's the code:
这是代码：
$(form).submit(function () {
$.post($(this).attr('action'), $(this).serialize(), function (data) {
if (data.status == 'SUCCESS') {
window.location = data.redirectUrl;
}
}
...
It works really well in all browsers. But there's a problem in Chrome. It doesn't offer to save the password.
它在所有浏览器中都运行良好。但是在 Chrome 中存在问题。它不提供保存密码。
When JavaScript is turned off, the password is saved, so the problem is definitely in redirection to a new location.
当 JavaScript 关闭时，密码会被保存，所以问题肯定是重定向到一个新位置。
How can I fix that?
我该如何解决？
回答by zeitgeist87
I have found a dirty workaround for this problem, by inserting an invisible iframe and targeting the form to it:
通过插入一个不可见的 iframe 并将表单定位到它，我找到了解决此问题的肮脏解决方法：
<iframe src="/blank.html" id="loginTarget" name="loginTarget" style="display:none">
</iframe>
<form id="loginForm" action="/blank.html" method="post" target="loginTarget"></form>
The corresponding JavaScript:
对应的 JavaScript：
$('#loginForm').submit(function () {
$.post('/login', $(this).serialize(), function (data) {
if (data.status == 'SUCCESS') {
window.location = data.redirectUrl;
}
})
})
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.
诀窍是，确实有两个请求。首先表单被提交到 /blank.html，服务器会忽略它，但这会触发 Chrome 中的密码保存对话框。此外，我们发出一个 ajax 请求并将真实表单提交到 /login。由于第一个请求的目标是一个不可见的 iframe，因此页面不会刷新。
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.
如果您不想重定向到另一个页面，这当然更有用。如果您无论如何都想重定向，则更改 action 属性是更好的解决方案。
Edit:
编辑：
Here is a simple JSFiddleversion 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.
这是它的一个简单的JSFiddle版本。与评论部分中的声明相反，不需要重新加载页面，并且它似乎非常可靠地工作。我在带有 Chrome 的 Win XP 和带有 Chromium 的 Linux 上对其进行了测试。
回答by Marcel
Are you able to change the form's actionvalue to data.redirectUrland let the form submit as usual? This should trigger the browser's prompt to save the username and password.
您是否能够将表单的action值更改为data.redirectUrl并让表单像往常一样提交？这应该会触发浏览器提示保存用户名和密码。
$(form).submit(function () {
$.post($(this).attr('action'), $(this).serialize(), function (data) {
if (data.status == 'SUCCESS') {
$("form#name").attr('action', data.redirectUrl);
}
}
...
回答by Johann du Toit
Have a read here - why doesn't chrome recognize this login form?.
在这里阅读 -为什么 chrome 不能识别这个登录表单？.
The important comment is:
重要的评论是：
Yes, it doesn't work when you remove return false. You will need to rewrite your code. Chrome does not offer to save passwords from forms that are not "submitted" as a security feature. If you want the Save Password feature to work, you're going to have to ditch the whole fancy AJAX login.
是的，当您删除 return false 时它不起作用。您将需要重写代码。Chrome 不提供从未“提交”的表单中保存密码作为安全功能。如果您希望保存密码功能起作用，您将不得不放弃整个花哨的 AJAX 登录。
So you could maybe consider removing the Ajax and just letting the Form post to login, this will probably be the only way for Users that do not have JavaScript enabled to login with your form too.
因此，您可以考虑删除 Ajax 并让表单发布登录，这可能是没有启用 JavaScript 的用户也可以使用您的表单登录的唯一方法。
回答by iexx
I have fixed it using this way:
我已经用这种方式修复了它：
<form action="/login"></form>
And the JavaScript:
和 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;
}
}
回答by Eugeniu Torica
In my case Chrome didn't remember password because there were two different inputs of type password in one form (create/login in one form). The issue in my case was solved by using javascript manipulation of removing one of the input of type password so that browser could decide which submitted fields contains credential data.
在我的情况下，Chrome 不记得密码，因为在一种形式中有两种不同的密码类型输入（以一种形式创建/登录）。我的问题是通过使用 javascript 操作删除密码类型的输入之一来解决的，这样浏览器就可以决定哪些提交的字段包含凭据数据。
回答by Predrag Stojadinovi?
I found that the username and password input fields must have the name tag set in order for Chrome to offer to save the password. This threadis about simple forms, but the same fixed my jquery AJAX form submission.
我发现用户名和密码输入字段必须设置名称标签，Chrome 才能提供保存密码的功能。这个线程是关于简单的表单，但同样修复了我的 jquery AJAX 表单提交。
回答by alex.net
From yesterday, 10/07/2013, Chrome 28, it's now possible without any trick. Seems they fixed that...
从昨天，10/07/2013，Chrome 28，现在可以不用任何技巧。似乎他们解决了这个问题...
回答by shameleo
So now in 2019 we can do this using Credential Management API.
所以现在在 2019 年，我们可以使用Credential Management API来做到这一点。
NOTE: it is experimental API!Check this: https://developers.google.com/web/fundamentals/security/credential-management/save-forms
注意：它是实验性的 API！检查这个：https: //developers.google.com/web/fundamentals/security/credential-management/save-forms
Essential code:
基本代码：
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... }
)
}
