将带有js结果的jsp注入html>body>div答案

【问题标题】：inject jsp with js result into html>body>div将带有js结果的jsp注入html>body>div
【发布时间】：2020-05-23 12:53:28
【问题描述】：

我的问题是：可以在 html 中插入 jsp 响应（html）吗？我认为使用 XmlHttpRequest。

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML =
      this.responseText;
  }
};
xhttp.open("GET", "ajax_info.jsp", true);
xhttp.send();

我的问题是：但是如果我的jsp中有javascript在页面加载后执行，它是否像我直接通过浏览器url调用jsp一样执行？

提前致谢

例如：这是 index.html

<html>
<head>
<script type="text/javascript" src="app.js"></script>
</head>
<body onload="loadInfo();">

<div id="container"></div>
</body>

这是 app.js：

function loadInfo(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("container").innerHTML =this.responseText;
    }
  };
  xhttp.open("GET", "info.html", true);
  xhttp.send();
}

这是 info.html（我有 jsp，但我认为它是一样的..）：

<html>
<head>
<script type="text/javascript" src="info.js"></script>
</head>
<body>
<div id="body_info">This is info..</div>
<script type="text/javascript" >
  console.log("wait for info..");
  info();
</script>
</body>

这是 info.js：

function info(){

    document.getElementById("body_info").innerHTML ="info.js is executed";
}

如果我调用 info.html，在浏览器中输入 url（例如 http://localhost:8000/info.html），脚本就会执行，我得到 “info.js 已执行”，而不是如果我调用 index.html，xhr 请求可能不会返回相同但我看到“这是信息”。

如何使用 xhr 解决和完成这个问题？

谢谢
罗伯托

【问题讨论】：

标签： javascript ajax jsp xmlhttprequest es5-compatiblity

【解决方案1】：

当您将 ajax 调用到某个页面时，<body></body> 下的内容将作为响应返回，因此在您的代码中 this.responseText 也将包含 <script></script> 代码。您可以检查您是否使用 chrome，然后单击 element tab 您将看到 <script></script> 也返回为 response 。现在，要执行此操作，您可以执行以下操作：

function loadInfo() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("container").innerHTML = this.responseText;
      //getting the script which is return as response back 
      var datas = document.getElementById("container").getElementsByTagName("script");
      //looping  unders <script></script>
      for (var i = 0; i < datas.length; i++) {
        console.log("inside script executing")
        eval(datas[i].innerText); //executing script
      }
    }
  };
  xhttp.open("GET", "n.html", true);
  xhttp.send();
}

info.html 的脚本如下所示：

<script>
console.log("wait for info..");
info();

function info() {
 document.getElementById("body_info").innerHTML = "info.js is executed";
}
</script>

【讨论】：

好的，但是如果我有外部js库的脚本Src导入怎么办？我无法将所有脚本内容文件复制到
我没试过，但应该可以。不要忘记将 script 放在您的 body 标记中。
我尝试将 <script type="text/javascript" src="info.js"></script> 包含在您的 index.html 页面中，而不是在 ajax 调用页面中，它应该可以工作。