Question

我有一个网络应用程序，我有一个简单的登录框。没有表单可以提交，登录程序是通过jQuery AJAX实现的。

在这种情况下，如何让网络浏览器显示“您希望浏览器记住密码吗？”对话框？

提前致谢！

注意：我正在寻找一种至少适用于所有主流浏览器的最新版本的解决方案。

编辑：我确实使用Cookie来记住用户登录信息。问题是浏览器不提供记住密码。

这是HTML：

<div class="window loginWindow sn-login">
    <div>
        <input type="text" id="UserName" placeholder='Username' />
    </div>
    <div>
        <input type="password" id="Password" placeholder='Password' />
    </div>
    <div>
        <div>
            <input type="checkbox" id="RememberMe" />
            <label for="RememberMe">Remember my login</label>
        </div>
        <div>
            <button class="loginSubmit">Login</button>
        </div>
    </div>
</div>

这是JavaScript：

var $userName = $("#UserName"),
    $rememberMe = $("#RememberMe"),
    $password = $("#Password");

var name = $userName.val(), pw = $password.val();
$.ajax({
    type: "POST",
    url: "/UserActions/LogIn",
    dataType: "json",
    data: { password: pw, email: name },
    success: function (data) {
        if (data.success) {
            if ($rememberMe.is(":checked")) {
                // Omitted for brevity
            }

            window.location.reload();
        }
        else {
            // Omitted for brevity
        }
    }
});

Answer 1

只需创建一个表单元素作为控件的包装器，并使用表单的提交处理程序来执行ajax调用。

<form id="myform">
<div class="window loginWindow sn-login">
    <div>
        <input type="text" id="UserName" placeholder='Username' />
    </div>
    <div>
        <input type="password" id="Password" placeholder='Password' />
    </div>
    <div>
        <div>
            <input type="checkbox" id="RememberMe" />
            <label for="RememberMe">Remember my login</label>
        </div>
        <div>
            <button class="loginSubmit">Login</button>
        </div>
    </div>
</div>
</form>

像这样更改脚本：

$('.loginSubmit').on('click', function(){

$("#myform").submit(function(){


var $userName = $("#UserName"),
    $rememberMe = $("#RememberMe"),
    $password = $("#Password");

var name = $userName.val(), pw = $password.val();
$.ajax({
    type: "POST",
    url: "/UserActions/LogIn",
    dataType: "json",
    data: { password: pw, email: name },
    success: function (data) {
        if (data.success) {
            if ($rememberMe.is(":checked")) {
                // Omitted for brevity
            }

            window.location.reload();
        }
        else {
            // Omitted for brevity
        }
    }
});
return false;
});

});

Answer 2

使用表单触发浏览器的内置“记住密码”选项，但在其上设置取消默认事件的submit事件并改为处理您的AJAX登录。

如何在AJAX登录的情况下启用记住密码？

2 个答案: