Question

大家好，需要一些帮助。我有这样的ajax代码。

$(document).ready(function() {
    $(".ajaxLoadPage").click(function(){
        var page=$(this).attr('id');
        alert(page);
        $.ajax({
            type:'GET',
            url:"/SMS/jsp/"+page+".do",
            async:false,
            dataType:"html",
            cache:false,
            success:function(result){
                $('#main-content').html(result);
            }
        });
    });
}),

从服务器成功返回'结果'，但当我尝试用

结果覆盖div #main-content时

$('#main-content').html(result);

在几分之一秒内div#main-content被替换/用'结果'覆盖但在此之后div#main-content会自动加载上一个/旧内容？

请帮助我，我正是为什么会发生这种错误。

Answer 1

你说过：

async:false

这意味着JavaScript将阻止页面上发生的所有其他事情。

在几分之一秒内，＃main-content被替换/覆盖＆＃39;结果＆＃39;但在此之后div＃main-content会自动加载上一个/旧内容吗？

这意味着您通过执行自然加载新页面的操作来触发JavaScript。可能点击链接或提交表单。

如果你没有async:false，它就会重新加载页面而不等待JS运行。

要妥善解决此问题：

写quality HTML and enhance it with JavaScript。

设置触发JS的链接，使其正确when JS fails。（注意：你应该让它返回一个完整的HTML文档）。

<a href="/SMS/jsp/something.do">...</a>

然后你可以在JavaScript中使用href。

url: $(this).attr('href'),

确保在JS可用时阻止链接的默认行为：

$(".ajaxLoadPage").click(function(event){
    event.preventDefault();

您需要调整$('#main-content').html(result);，以便过滤掉您不更新的内容（例如主导航）。

在等待来自服务器的数据时，不要阻止浏览器继续处理其他内容（删除async:false,）。

Answer 2

这个用例专门有一个jQuery函数。它被称为.load()（docs）。

$(function() {
    $(".ajaxLoadPage").click(function () {
        $('#main-content').load("/SMS/jsp/" + this.id + ".do");
    });
});

即使您不想使用此功能，您的方法仍然比以前更加复杂：

$(function() {
    $(".ajaxLoadPage").click(function () {
        $.get("/SMS/jsp/" + this.id + ".do").done(function (result) {
            $('#main-content').html(result);
        });
    });
});

注意：

使用同步Ajax请求没有一个理由。如初。
从服务器发送正确的HTTP缓存标头，您无需影响客户端的缓存行为。这总是更可取。
当$.ajax()完成工作时，无需使用$.get()。
$(this).attr('id')是一种非常详细的说this.id的方式。

Answer 3

以下评论帮助我解决了我的问题的 (If .ajaxLoadPage is an <a>, then yes. That, or something like href="#") 由@Tomalak提供

.html（）方法不会改变div内容

3 个答案: