Question

我有一个奇怪的行为，一个AJAX登录表单显示在一个Bootstrap模式框中。

80％的时间我点击“输入”按钮或点击“提交”，XHR请求被发送到我的应用程序，一切正常（我要么重定向到起始页面，要么收到用户名/密码的消息）组合是错误的。）

但在大约10个测试中，有2个没有发出XHR请求，但是触发了正常请求，我的浏览器重定向到/显示JSON响应（例如{"status":"FAILED","errors":[{"code":1222204027,"message":"Authentication failed!","severity":"Error","title":""}]}）。

function registerAjaxForm() {
    $('#login-form').submit(function(e) {
        e.preventDefault();
        var $form = $('#login-form');
        $.ajax({
            url: $form.attr('action'),
            type: $form.attr('method'),
            contentType: "application/x-www-form-urlencoded;charset=utf-8",
            dataType: 'json',
            beforeSend: function(arr) {
                $('.alert').remove();
                $form.hide();
                $('.modal-body').append('<p align="center"><i class="icon-spin icon-spinner icon-4x muted"></i></p>');
            },
            error: function(data){
                $('.modal-body').prepend('<div class="alert alert-danger"><a class="close" href="#" data-dismiss="alert">×</a><h4 class="alert-heading">Oh snap! Your server took a nose dive!</h4>Internal Server error</div>');
                $('p .icon-spin').remove();
                $form.show(800, 'swing');
            },
            success: function(response) {
                if (response.status === 'OK') {
                    window.location = response.redirect;
                } else if (response.status === 'FAILED') {
                    var error;
                    for (error in response.errors) {
                        $('.modal-body').prepend('<div class="alert alert-danger"><a class="close" href="#" data-dismiss="alert">×</a>'+ response.errors[error].message +'</div>');
                    }
                    $('.control-group').addClass('error');
                    $('p .icon-spin').remove();
                    $form.show(800, 'swing');
                }
            }
        });
    });
}

（至少可以在Chrome和Safari中重现。）

我假设以某种方式提交事件不能绑定到表单。表单的HTML也是由AJAX加载的，但我等待绑定它直到它存在：

$(function() {

    // Link Action to get Login Panel
    $('.login-panel').click(function(el) {
        el.preventDefault();
        var url = $(this).attr('href');
        $.get(url, function(response){
            $('#modal-login').html(response).promise().done(function() {
                registerAjaxForm();
            });
        });
    });

});

也许这只是一些愚蠢的错误，但我找不到它。谢谢你的帮助！

Answer 1

如果偶尔遇到此问题，问题可能是您的AJAX请求是异步的。设置：

 async: false

在你的ajax调用中

而不是

e.preventDefault（）;

修改使用： return false：

Answer 2

当动态加载html时，始终使用事件委派来附加事件

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

e.preventDefault();
    var $form = $('#login-form');
    $.ajax({
        url: $form.attr('action'),
        type: $form.attr('method'),
        contentType: "application/json;charset=utf-8",
        dataType: 'json',
        data:$form.serialize(),
        beforeSend: function(arr) {
            $('.alert').remove();
            $form.hide();
            $('.modal-body').append('<p align="center"><i class="icon-spin icon-spinner icon-4x muted"></i></p>');
        },
        error: function(data){
            $('.modal-body').prepend('<div class="alert alert-danger"><a class="close" href="#" data-dismiss="alert">×</a><h4 class="alert-heading">Oh snap! Your server took a nose dive!</h4>Internal Server error</div>');
            $('p .icon-spin').remove();
            $form.show(800, 'swing');
        },
        success: function(response) {
            if (response.status === 'OK') {
                window.location = response.redirect;
            } else if (response.status === 'FAILED') {
                var error;
                for (error in response.errors) {
                    $('.modal-body').prepend('<div class="alert alert-danger"><a class="close" href="#" data-dismiss="alert">×</a>'+ response.errors[error].message +'</div>');
                }
                $('.control-group').addClass('error');
                $('p .icon-spin').remove();
                $form.show(800, 'swing');
            }
        }
    });

});

并且我不确定您使用的内容类型，因此我将其更改为json并且您的通话中缺少数据，因此我添加了该内容。记下这些变化。

希望这会有所帮助。

Answer 3

在registerAjaxForm（）内的第一行发出警告，如果调用此函数，则查看xhr何时失败。如果是，那么你必须检查你的功能，否则检查它为什么没有被调用..

jQuery表单重定向到操作而不是执行AJAX请求

3 个答案: