jquery ajax load div 在 IE 和 Chrome 中不起作用

Question

这个问题已经被问了很多次了。但在IE和Chrome中，没有一个解决方案对我有效。

我基本上想在进行ajax调用时显示一个加载图像。

以下是我正在尝试的。

function ws(){
showL();
var res=$.ajax({url:'webservice.asp?service=LoadingTestSRV',async:false,cache:false}).responseText;
$('#dv').html(res);
hideL();
$('#complete').html('Done');
}
function showL()
{
$('#loading').show();
}
function hideL()
{
$('#loading').hide();
}

以下是HTML

<table cellspacing="1" cellpadding="1" border="1">
<tr><td>
<input type="button" value="ckick" id="btn" onClick="ws();">
<input type="button" value="clear" onClick="$('#dv,#complete').html('');">
</td><td>
<div id="dv"></div>
</td></tr><tr>
<td>Here<div id="loading" style="display:none" >Loading.................</div></td>
<td>final<div id="complete"></div></td></tr>
</table>

在上面的js之后，我尝试了

• ajaxStart和ajaxStop
• $.ajaxSetup
• $.ajax(｛…｝).done(hideL)

我尝试过的所有js代码都在Firefox中工作，但没有一个在IE和Chrome中工作在Firefox中，代码按预期工作。显示加载div，调用ajax，隐藏加载div。这正是我所期待的。在IE&Chrome，加载div没有显示。也许在ajax调用之后或之前，它会很快被显示和隐藏。

请让我知道可以做些什么来使代码在IE&铬。

必须有一些变通办法，因为我看到其他网站显示加载div。或者我可能在做一些愚蠢的事情。

一旦代码在所有浏览器中都能工作。我想制作一个通用函数(比如jQuery插件)，在调用ajax时显示一个加载div。

Answer 1

试试这个：这将确保在ajax调用完成后隐藏ur DIV

function ws() {
showL();
var res ="";
$.ajax({
url: 'webservice.asp?service=LoadingTestSRV',
async: true,
cache: false,
success: function(data) {
res=data;
$('#dv').html(res);
hideL();
$('#complete').html('Done');
}
});
}
function showL() {
$('#loading').show();
}
function hideL() {
$('#loading').hide();
}​

Answer 2

这个表单以前对我有用：(我输入了慢速，这样你就可以看到它是否快速)

$('#loading').ajaxStart(function() {
$(this).show("slow");
}).ajaxComplete(function() {
$(this).hide("slow");
});

这里的测试示例：

http://jsfiddle.net/MarkSchultheiss/xgFkw/

Answer 3

我这样做，如果有帮助的话。。

$.ajax({
beforeSend: function () {
$('#loadingDiv').show();
$('#accordion').hide()
},
complete: function () {
$('#loadingDiv').hide();
$('#accordion').show();
},
type: "GET",
url: 
data: shallowEncodedData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (

Answer 4

ajax调用中出现问题。从ajax调用中删除async:false，它甚至可以在IE8/9和Chrome中工作。对于其他迷失的灵魂，请进行上述更改并重试。

Answer 5

simple只需在ajax函数中添加async=true。它将在铬中工作

Answer 6

我在Chrome中解决这个问题的方法是，在AJAX调用上使用一毫秒的超时。

例如

$("#mySpinningLoader").show();
var t = setTimeout(function () {
$.ajax({
url: rootPath + controllerNAction,
async: false,
type: "POST",
data: JSON.stringify(lightweightObject),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data, textStatus, jqXHR) {
$("#mySpinningLoader").hide();
}
});
}, 1);