ajax - jquery ajax 加载 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 和 Chrome 中运行。

必须有一些解决方法，因为我已经看到其他网站显示正在加载 div。或者也许我正在做一些愚蠢的事情。

一旦代码可以在所有浏览器中运行。我想制作一个通用函数(如 jQuery 插件)来在调用 ajax 时显示加载 div。

Answer 1

试试这个: 这将确保您的 DIV 在 ajax 调用完成后隐藏

    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();
    }​