成功的Chrome jquery ajax回调未触发答案

【问题标题】：Chrome jquery ajax callback on success not firing成功的Chrome jquery ajax回调未触发
【发布时间】：2011-12-16 17:23:54
【问题描述】：

据我所知，$.ajax 在每个浏览器中一直运行得非常顺利，直到现在。我有一个非常简单的函数，当用户发生一些操作时调用。在 Firefox 中，一切运行顺利。但是在 Chrome 中，当 $.ajax 请求启动时，成功的回调不会触发。

这是实际的 sn-p：

    var form  = $("#templateCreator"),
    formType  = form.attr("method"),
    formData  = form.serialize(),
    action    = form.attr('action');

    $.ajax({
        type: formType,
        url: action,
        data: formData,
        success: function(){
            console.log('Can\'t see me in Chrome, but ok in firefox !')

            // Handle all form submit events to form validator first
            validator(form, targetInput);
        }
    });

令人费解的是似乎没有任何问题，数据被序列化并正确发送。有谁知道我错过了什么？

【问题讨论】：

您是否尝试过记录 AJAX 调用中使用的变量的值 (formType/formData/action)？您是依靠validator() 函数运行来验证它是否有效，还是尝试将console.log() 作为success 回调的第一行？
本地主机？如果是真的那为什么它不起作用。 Chrome 不允许本地主机上的 AJAX
@AndreasAL，你做错了本地主机。
捕获错误状态可能会很有用，而不仅仅是成功，只是说......良好的做法等等。
我唯一能想到的调试方法是设置complete 和error 回调函数以通过回调参数诊断问题。

标签： ajax google-chrome jquery

【解决方案1】：

首先按照@Jasper 的建议添加一个错误和完整的方法。

$.ajax({
        type: formType,
        url: action,
        data: formData,
        success: function(){
            console.log('Can\'t see me in Chrome, but ok in firefox !')

            // Handle all form submit events to form validator first
            validator(form, targetInput);
        },
        error: function() {
            console.log($.makeArray(arguments));
        },
        complete: function() {
            console.log($.makeArray(arguments));
        }
    });

那么你可以：

打开Chrome调试器（F12），进入scripts标签，在success/complete/error里面放一个断点；查看堆栈跟踪和顿悟值；）
查看控制台日志
为了大喜，取下每一个 Zig！

【讨论】：

谢谢。虽然没有给我答案，但你给了我一些关于如何调试的启示。再次感谢。
确保没有其他 .ajax() 函数为同一次点击触发。我包含了一些具有相同 $('element').click() 函数的文件，这些函数触发了 .ajax() 调用。初学者的错误，但有时甚至兽医也会这样做;-)

【解决方案2】：

我遇到了这个问题，并设置了 async: false。这在 Chrome 中对我有用。看起来 Chrome 的 async: true 有问题。

   restget = function(url, cb){
        $.ajax({
        url: url,
        dataType: 'json',
        crossDomain: true,
        async: false,
        success: cb
        });

【讨论】：

【解决方案3】：

试试这个.....

数据：formData，异步：假，

Chrome 在异步调用方面存在一些问题。

【讨论】：

不要这样做。它有更多的问题。

【解决方案4】：

我在尝试获取 json 数组时遇到了类似的问题。我必须将dataType: 'json' 添加到我的ajax 中，以便非Firefox 浏览器知道我的数据类型是什么。例如：

$.ajax({
    type: 'Get',
    url: "http://api.geonames.org/earthquakesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&username=demo",
    success: function(data){
        var jsonArray = jQuery.parseJSON(data);
        alert(jsonArray.status.message);
    }
});

和

$.ajax({
    type: 'Get',
    url: "http://api.geonames.org/earthquakesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&username=demo",
    dataType: 'json',
    success: function(data){
        var jsonArray = data;
        alert(jsonArray.status.message);
    }
});

在 Firefox firebug 中运行时会显示相同的内容。但是当你在 Chrome DevTools 中运行它时，它只会在底部运行。我希望这能解决您的问题。

【讨论】：