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

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

这是代码:

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

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

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

我该如何解决这个问题?

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

  

相应的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上进行了测试。

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

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

请在此处阅读 – 为什么Chrome不识别此登录表单? 。

重要的评论是:

是的,当你删除return false时它不起作用。 您需要重写代码。 Chrome不提供从未作为安全function“提交”的表单保存密码。 如果你想要保存密码function,你将不得不放弃整个花哨的AJAX登录。

因此,您可以考虑删除Ajax并让表单post登录,这可能是没有启用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; } } 

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

我发现用户名和密码输入字段必须设置名称标签才能让Chrome提供保存密码。 这个线程是关于简单的表单,但同样修复了我的jquery AJAX表单提交。

从昨天,2013年7月10日,Chrome 28,它现在可以没有任何技巧。 似乎他们修复了……