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

【问题标题】：How to change contents of a webpage without refreshing?如何在不刷新的情况下更改网页内容？
【发布时间】：2021-04-28 20:58:20
【问题描述】：

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

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;

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

【问题讨论】：

发生的情况是
被整个网页替换，所以我在网页中有一个网页。这正是应该做的，所以这里没有错。您需要做的是a）在服务器上检测ajax调用并仅发送您需要的信息或b）通过xhttp.responseText搜索并提取您需要的部分。
@Syed 我不太擅长 ajax。我真的找不到第二个选项的解决方案..
检查我的答案我已尝试尽可能举例说明。

标签： javascript html jquery ajax flask

【解决方案1】：

这里有一段代码 sn-p 可能对你有用。

您的 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;
     }

【讨论】：

几乎成功了。我接近<body> 末尾的javascript 不起作用。我不明白，我只是在更改<div> 里面的<body>。其他一切正常，包括<body> 中的代码，<div> 之外的代码以及我的<head> 标记中的代码。
您是在尝试通过 ajax 加载新的 JS 还是已经在正文中的核心 JS？如果您正在尝试加载新的 js，例如 div，或者如果有任何 JS 被解析并通过上面的示例注入，那么特定的代码将无法工作。