jQuery AJAX 发送两个请求

Question

jQuery AJAX 似乎发送两个请求。由于我使用基于时间的双因素身份验证方法，第二个请求失败，因此原始请求“失败”。

第一个是 post 请求，这很好，但接下来是 GET 请求，这不太好。

这是我用来生成查询的 JavaScript。

$('#form').live('submit', function(event) {
    var target = $('#ajax');
    var url = '/ajax/user/authenticateLevel3';
    $.ajax({
        type: "POST",
        url: url,
        data: $('#form').serialize(),
        dataType: 'json',
        success: function(data, status) {
            $.getJSON(url, function(data) {

                if (!data.resultCode) {
                $('#ajax').html($.base64.decode(data.html));
                $('#ajax').modal();
                } else {
                    location.reload();
                }

            });
        }
    });
    event.preventDefault();
});

我有什么想法可以解决这个问题吗？

Answer 1

那是因为你正在执行 2 个 ajax 调用 (.ajax和.getJSON)

尝试这样做（使用文档事件委托而不是.live）：

$(document).on('submit', '#form', function(event) {
    var target = $('#ajax');
    var url = '/ajax/user/authenticateLevel3';
    $.ajax({
        type: "POST",
        url: url,
        data: $('#form').serialize(),
        dataType: 'json',
        success: function(data, status) {
            if (!data.resultCode) {
                $('#ajax').html($.base64.decode(data.html));
                $('#ajax').modal();
            } else {
                location.reload();
            }
        }
    });
    event.preventDefault();
});

Answer 2

getJSON是一种 AJAX 方法，用于从服务器检索 JSON，而不是处理其他 ajax 方法返回的数据。只需将其删除即可。

$('#form').live('submit', function(event) {
    var target = $('#ajax');
    var url = '/ajax/user/authenticateLevel3';
    $.ajax({
        type: "POST",
        url: url,
        data: $('#form').serialize(),
        dataType: 'json',
        success: function(data, status) {
            if (!data.resultCode) {
            $('#ajax').html($.base64.decode(data.html));
            $('#ajax').modal();
            } else {
                location.reload();
            }
        }
    });
    event.preventDefault();
});

既然您提到要切换到.on，语法将如下所示：

$(parent).on('submit', '#form', function(event) {
    /*
     * ...
     */
});

其中parent是 的最近的静态父元素#form。