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

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

请在此处阅读 - 为什么Chrome不识别此登录表单？.

重要的评论是:

是的,当你删除return 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;
   }
}