Question

我正在尝试使用烧瓶制作应用程序。这是我的代码的一部分：

base.html

<div id= "contents">
<button onclick="changeContents()">Click me</button>
{% block text %}{% endblock %}
</div>

<script>
  function changeContents() {
    var xhttp = new XMLHttpRequest();
    xhttp.open("GET", "index", true);
    xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("contents").innerHTML = xhttp.responseText;
     }
    }
    xhttp.send();
  }
</script>

index.html

{% extends "base.html" %}

{% block text %}
<p>Hello</p>
{% endblock %}

结果是 <div id = "contents"> 被替换为整个网页，所以我在网页中有一个网页。我想过使用

document.getElementById("contents").innerHTML = '<object type="text/html" data="index" ></object>';

它也做了同样的事情，但页面内的页面更小。为什么要这样做？是否有使用纯 javascript 或 jQuery 的简单解决方案？

编辑：

代替

document.getElementById("contents").innerHTML = xhttp.responseText;

我已经删除了整个网页，只是写了

document.body.innerHTML = xhttp.responseText;

它有效，但我很确定这是不好的做法..

Answer 1

这里有一些可能对您有用的代码片段。

您的 XMLHttpRequest 工作正常，并且还有一个响应文本，所以一切都很好
接下来我们需要使用 DOMParser() 将响应文本解析为 html
然后我们搜索通过变量引用的已解析 html，即我们使用 variable.getElementById 代替 document.getElementById
然后提取您需要的内容
然后将提取的元素的outerHTML复制到我们想要改变的div的innerHTML中。

function chnagehtml(){

var button =  document.getElementById('changeme');
var response = '<html><head></head><body><div id="a">hellow</div> <div id="b">hellow</div></body></html>';

var parser = new DOMParser();


var parsedDoc = parser.parseFromString(response, "text/html");
var iJustWantDiv = parsedDoc.getElementById('a'); 
console.log(iJustWantDiv);
button.innerHTML = iJustWantDiv.outerHTML;


}

<div id="changeme">Iam empty</div>
<button id="button" onclick='chnagehtml();'>get html</button>

所以在你的代码中可以是这样的；

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


var parser = new DOMParser();


var parsedDoc = parser.parseFromString(xhttp.responseText, "text/html");
var iJustWantDiv = parsedDoc.getElementById('a'); 

document.getElementById("contents").innerHTML = iJustWantDiv.outerHTML;
     }

如何在不刷新的情况下更改网页内容？

1 个答案: