IE 兼容性问题 动态加载 Jquery Ajax

Question

我正在使用 Jquery Ajax 生成动态垂直菜单。

该代码在 Chrome、Firefox 上运行良好，但无法使用 IE 加载。我是 Web 开发和 IE 浏览器兼容性问题的新手。

演示链接位于 pumpit.in 查看左侧菜单中的加载程序。它没有出现在 IE 中。如果你重新加载链接，它可能会来。

使用的js代码是：

$.ajax({

    type: "POST",
    url: "Index.aspx/wmCommSubComm",
    data: jsonData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: false,
    cache: false,
    beforeSend: function () {
        // this is where we append a loading image
        $('#container_leftns').html('<img src="/images/loading123.gif" alt="Loading..." />');
        //return false;
    },
    success: function (msg) {
        //retData = msg.d;
        $('#container_leftns').html(msg.d);
        return false;
    },
    error: function () {
        // failed request; give feedback to user
        //$('#Attri_left-div').html('<p><strong>Oops!</strong> Try that again in a few moments.</p>');
    }
});

如果有人可以指导我，那将非常有帮助。

Answer 1

读取 ajax 调用的结果后，您将返回一些 HTML5 元素，例如“section”。它在 Firefox/Chrome 和 IE9 中运行良好。但是，低于 IE9 的版本不支持 HTML5 标签。他们无法识别 HTML5 标签。请注意，IE9 并不支持所有 HTML5。参考：HTML5 tags in IE9

对于低于 IE9 的版本，您可以通过包含 javascript fix html5shim / from github html5shiv 来帮助他们识别 HTML5 标签。
-或-
改为将 HTML5 标记更改为 div。

关于修复加载图像，我想我们会解决这个问题。

HTML - 将加载图像预加载到容器中并显示它

<div id="container_leftns_loading" class="container_leftns">
    <img src="http://pumpit.in/images/loading123.gif" alt="Loading..." />
</div>
<div id="container_leftns"></div>

JavaScript

$.ajax({
    type: "POST",
    url: "Index.aspx/wmCommSubComm",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    async: false,
    cache: false,
    beforeSend: function () {
        // use show instead and clear the leftns container
        $('#container_leftns_loading').show();
        $('#container_leftns').html('');
        //return false;
    },
    success: function (msg) {
        // hide the loading image when success
        $('#container_leftns_loading').hide();
        $('#container_leftns').html(msg.d);
        return false;
    },
    error: function () {
        // failed request; give feedback to user
        //$('#Attri_left-div').html('<p><strong>Oops!</strong> Try that again in a few moments.</p>');
    }
});