使用jQuery Ajax加载HTML至整个文档后页面为空，如何解决？

嘿，我来帮你搞定这个问题！你的代码里有个关键错误导致页面为空——你不能直接对document对象使用jQuery的html()方法。原因很简单：jQuery的html()方法是用来操作DOM元素节点（比如<html>、<body>这类标签）的innerHTML，而document是文档对象，不是元素节点，所以这个调用根本不会生效，页面自然就空了。

下面给你两种针对性的解决方案，根据你返回的HTML内容类型来选：

方案1：如果返回的是完整的HTML文档（包含<!DOCTYPE>、标签） #

这时候用原生JS的文档流操作更可靠，能让浏览器重新完整解析整个文档：

$.ajax({
    type:'GET',
    url: url,
}).done(function(data){
    console.log("data: " + data);
    // 打开文档流、写入完整HTML、关闭流
    document.open();
    document.write(data);
    document.close();
}).fail(function(xhr, status, error){
    // 替换已废弃的error方法为fail，同时安全解析错误信息
    let err;
    try {
        err = JSON.parse(xhr.responseText);
    } catch(e) {
        err = { Message: error || '请求发生未知错误' };
    }
    console.log("error: " + err.Message);
});

方案2：如果返回的是标签内部的内容（不含DOCTYPE和外层） #

这种情况可以直接操作<html>元素的内容：

$.ajax({
    type:'GET',
    url: url,
}).done(function(data){
    console.log("data: " + data);
    // 替换<html>标签内的所有内容
    $('html').html(data);
}).fail(function(xhr, status, error){
    let err;
    try {
        err = JSON.parse(xhr.responseText);
    } catch(e) {
        err = { Message: error || '请求发生未知错误' };
    }
    console.log("error: " + err.Message);
});

另外还要提醒你两个小细节：

• jQuery的error()方法在1.8版本之后已经被废弃了，推荐使用fail()方法来处理请求失败的情况；
• 用eval()解析JSON是不安全的，容易引发安全问题，换成JSON.parse()并加上异常处理，能避免解析失败导致的代码报错。

内容的提问来源于stack exchange，提问作者piet