javascript - 使用 preventDefault() 提交表单但保留浏览器自动完成功能

Question

我正在使用 ajax 发送表单数据，因此要覆盖我使用 preventDefault() 的默认浏览器行为，但我想保留浏览器功能以记住为 future 的自动完成。

这有可能吗？

HTML

<form id="form-login" action="/padrao/Login/executaLoginAjax" method="post">
    <input type="text" id="usuario" name="usuario[email]" class="entradas" placeholder="Usuário" maxlength="80" required />
    <input type="password" id="senha" name="usuario[senha]" class="entradas" placeholder="Senha" maxlength="12" required />
    <input type="submit" id="btn-logar" value="Acessar o sistema" />
</form>

Javascript

$('#form-login').submit(function(event){

    event.preventDefault();

    var action = $(this).attr('action');
    var dados  = $(this).serialize();

    $.ajax({
        type: "POST",
        url: action,
        data: dados,
        dataType: "json",

        success: function(json){

            if(json.sucesso){
                window.location.href = 'http://' + location.host + '/home';
            }else{
                alert('fail');
            }

        }

    });

});

Answer 1

简答

更正我上面的评论。在监听 native 表单提交时使用 preventDefault() 方法时，这是不可能的。 AJAX 与此无关，只是作为首先使用 preventDefault() 的常见原因。

长答案

截至目前，网络浏览器的自动填充或自动完成数据存储仅在表单实际通过常规提交过程并触发数据序列化时触发。

使用 event.preventDefault(); 可防止浏览器达到此状态，因此它永远不知道要保存表单数据以备后用。

可能的补救措施

1. 设置 var allowNativeSubmit = false; 标志，在成功验证并保存表单后设置 allowNativeSubmit = true;，手动调用提交触发器并构建如果此标志为真，则在跳过 AJAX 提交的逻辑中。将表单数据发送到不对数据执行任何操作的成功页面。

2. 每次成功提交表单时，您都可以将数据保存到本地存储并实现 jQuery UI 自动完成功能以模拟浏览器的自动填充功能。

我之前实现过#1，效果很好。

#1 示例

$(document).ready(function () {

    var allowNativeSubmit = false;

    $('#form-login').on('submit', function (e) {

        if (!allowNativeSubmit) {

            e.preventDefault();

            var formTarget = $(this);

            $.ajax({
                type: formTarget.attr('method'),
                url: formTarget.attr('action'),
                data: formTarget.serialize(),
                dataType: "json",
                success: function (data) {

                    if (data.sucesso) {

                        // set the action to success page
                        formTarget.attr('action', 'success.html');

                        // allow native browser submit
                        allowNativeSubmit = true;

                        // call the native browser submit
                        formTarget.submit();

                    } else {

                        alert('form validation failed!');

                    }
                }
            });
        }
    });
});