Question

我使用ajax发送表单的数据，因此要覆盖我使用preventDefault()的默认浏览器行为，但我希望保持浏览器功能以记住为将来自动完成而键入的数据。

是否可以这样做？

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

简短回答

从上面纠正我的评论。在侦听本机表单提交时使用preventDefault()方法时，这是不可能的。除了作为首先使用preventDefault()的常见原因之外，AJAX与此无关。

答案很长

目前，只有在表单实际通过常规提交流程并触发数据序列化时，才会触发Web浏览器的自动填充或自动填充数据存储。

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

可能的补救措施

设置var allowNativeSubmit = false;标志，并在成功验证并保存表单后设置allowNativeSubmit = true;，手动调用提交触发器并构建逻辑，如果此标志为true，则跳过AJAX提交。将表单数据发送到成功页面，该页面不对数据执行任何操作。
每次成功提交表单时，您都可以将数据保存到本地存储中并实现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!');

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

Answer 2

只需将提交输入更改为常规按钮，然后移除信息周围的表单标记即可。你将失去执行标准提交的能力，但如果你真的需要，你可以阅读这些标签，或使用按钮输入，可以根据需要切换到提交输入。

使用preventDefault（）提交表单但保留浏览器自动完成功能

2 个答案: