Question

目的是，当收到Ajax响应强制浏览器呈现“responseText”时就像加载了新的html页面。将“responseText”添加到文档的“innerHTML”，不要强制浏览器使用新添加的标记重排页面。

HTML

<!DOCTYPE html>
 <html lang="en">
  <head>
   <meta charset="UTF-8">
   <title>START BOOTSRAP 4</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  </head>
  <body>
    <div class="container-fluid">
        <h1>BOOTSTRAP 4 NAV</h1>
    </div>
    <div class="horizontal-line"></div>
    <p>The <kbd>.nav</kbd>, <kbd>.nav-item</kbd>, <kbd>.nav-link</kbd> classes:</p>
    <ul class="nav">
        <div class="nav-item">
         <a href="#" class="nav-link">Nav-Link-1</a>
       </div>
    </ul>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
  </body>
</html>

的JavaScript

var xhttp = new XMLHttpRequest();

var html;

xhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {

      html = this.responseText;

     // how to apply this 'html' that to see rendered web page
     // with css styles etc.

  }
};

    // ---- Not working in this case... only for example ----
    // var win = window.open("", "_self");
   // win.document.open();
   // win.document.write(html);
   // win.document.close();
  // ---- End of Not working in this case... only for example ----

xhttp.open("GET", "http://127.0.0.1/nav.html", true);

xhttp.send();

提前致谢！

Answer 1

编辑：如果您需要加载外部CSS / JS或在页面上动态运行脚本，下面的vanilla JS将不会这样做。由于您使用的是jQuery，因此可以使用jQuery的html函数来实现此目的，以替换整个页面的html，同时加载外部文件并执行脚本：

$("html").html(html);

编辑：以下使用vanilla JS的解决方案仅适用于不依赖脚本执行或外部文件的简单案例。

获得ajax响应中的html后，使用html抓取getElementsByTagName元素，并将其innerHTML属性设置为收到的HTML：

document.querySelector("html").innerHTML = html;

如果您只需要替换页面正文，请抓住body元素并将其innerHTML属性设置为收到的HTML：

document.body.innerHTML = html;

Answer 2

看看jQuery .load（）

$("#idToAppendTo").load("your.html");

这是一个链接http://api.jquery.com/load/

或者，一旦通过ajax请求获得html，请使用此

document.getElementById("#idToAppendTo").innerHTML = this.responseText;

如何强制Web浏览器呈现Ajax响应，这是整个html页面？

2 个答案: