Question

基本上我有这个代码。我试图简单地更新一个div，但第一个innerHTML调用要么不起作用，要么永远不会在浏览器中呈现。

第二个确实有效，但是一旦ajax调用完成，它会追加“完成”。我确定它与ajax调用有关，但我不明白为什么会发生这种情况，因为在Firefox中没有问题。有没有人知道什么是错误或者firefox中是否有错误？为什么IE甚至会等待渲染innerHTML调用。不应该在调用之后立即更新div还是IE浏览器稍等一下？

document.getElementById("status").innerHTML = '<div>Loading</div>';

$jQuery.ajax({
         type: "POST", 
         url: urlValue, 
         data: parameters, 
         cache: false,
         async: false, 
         dataType: "json"
});

document.getElementById("status").innerHTML = '<div>Complete</div>';

Answer 1

为什么不异步进行呢？

var status = $('#status');

status.html('<div>Loading</div>');

jQuery.ajax({
    type: "POST", 
    url: urlValue, 
    data: parameters, 
    cache: false,
    dataType: "json",
    success: function() {
        status.html('<div>Complete</div>');
    }
});

Answer 2

尝试在加载完成时执行这些代码。

可能就在那一刻

document.getElementById("status").innerHTML = '<div>Loading</div>';

已执行的DOM尚未准备好访问它。

关于DOM准备 - 放入“装载值”
发出ajax请求（“显示加载直到结束”）
一旦结束，设置“完成”

无论如何，直到DOM准备就绪，你无法改变它。除了document.write，但它是另一个故事。

可能会有所帮助

setTimeout(function(){document.getElementById("status").innerHTML = '<div>Loading</div>';},0);

ajax post request ...

在ajax / json函数完成之后，IE Explorer 9才会呈现

2 个答案: