Ajax 加载面板适用于 FF，但不适用于 Chrome。知道为什么吗？答案

【问题标题】：Ajax loading panel works on FF but doesn't work on Chrome. Any idea why?Ajax 加载面板适用于 FF，但不适用于 Chrome。知道为什么吗？
【发布时间】：2013-08-13 03:59:18
【问题描述】：

我正在使用这个 ajax 加载面板http://thisiscontext.com/tools/jQuery-showLoading

我有以下代码：

jQuery('#map').showLoading(); 
var request = OpenLayers.Request.POST({
    url: "service.asmx/DeleteStopPoint",
    data: "{'TripId':'" + currentTrip + "','PointId':'" + feature.attributes.PointId + "'}",
    async: false,
    headers: { "Content-Type": "application/json; charset=utf-8" },
    callback: refreshMap
}); 
jQuery('#map').hideLoading();

发生的情况是，在 FF 中，我确实看到加载面板在发出请求之前出现并在其结束后隐藏......但在 chrome 中它不会发生。看起来面板出现并立即消失（因为如果我注释掉 hideLoading 功能，它会出现在 POST 之后）

知道为什么吗？

【问题讨论】：

我建议不要使用 sjax（非异步 ajax）
我应该怎么做？

标签： jquery ajax cross-browser

【解决方案1】：

不是使用同步请求，而是执行普通（异步）请求并在 ajax 回调中隐藏地图。也不要手动构建 JSON，你所拥有的实际上不是有效的 JSON，你应该使用 JSON.stringify 代替。

jQuery('#map').showLoading(); 
var request = OpenLayers.Request.POST({
    url: "service.asmx/DeleteStopPoint",
    data: JSON.stringify({ TripId: currentTrip, PointId: feature.attributes.PointId }),
/*    async: false, <-- don't do that*/
    headers: { "Content-Type": "application/json; charset=utf-8" },
    callback: refreshMap
}); 
function refreshMap(some, arguments0{
    ...
    jQuery('#map').hideLoading();
}

【讨论】：