如何在 XMLHTTPRequest 之后在 HTML 页面上显示响应？

Question

我正在制作自己的项目。我正在发送一个 AJAX 请求，该请求将返回一个响应。我想解析响应并在 table 中显示数据。像这样：

<head>
<script>
var message = null;
function ajaxCallToServer() {
    var xmlhttp = new XMLHttpRequest(); var url = "something"
    xmlhttp.open("GET", url, true);
    xmlhttp.setRequestHeader("Content-type", "application/json");
    xmlhttp.onload = (res) => {
        console.log(res['target']['response']);
        message = res['target']['response']; // message is a JSON object
    };
    xmlhttp.send();
}
</script>
</head>
...
<body>
    <% if ( message) { %>
    <!--loop through message object to display message on the page-->
    <div class="table">
        <% for(key in message) { %>
        <% if(message.hasOwnProperty(key)) { %>
        <div class="tr">
            <div class="td key"><b><%= key %></b></div>
            <div class="td value"><%= message[key] %></div>
        </div>
        <% } %>
        <% } %>
    </div>
    <% } %>
</body>

我正在分配变量消息（console.log 显示的数据正确），然后在页面后面使用 ejs 打印它。 ejs 不打印“消息”，我怀疑它与需要重新加载页面有关。求助！

Answer 1

你说得对，'message'调用的时候是null

这里有一个关于如何动态更改 DOM 元素的 de html 的简单示例。

HTML:

<p id="test">

</p>

JS (ES6):

const test = document.getElementById('test');

test.innerHTML = "Tested";

Fiddle: https://jsfiddle.net/

使用您的代码快速修复：

<head>
<script>
var message = null;
function ajaxCallToServer() {
    var responseText = document.getElementById('response');
    var xmlhttp = new XMLHttpRequest(); var url = "something"
    xmlhttp.open("GET", url, true);
    xmlhttp.setRequestHeader("Content-type", "application/json");
    xmlhttp.onload = (res) => {
        console.log(res['target']['response']);
        message = res['target']['response'];
        responseText.innerHTML = message;

    };
    xmlhttp.send();
}
</script>
</head>
...
<body>
    <p id="response"></p>
</body>

Answer 2

您的页面无法重新加载并且仍然设置了变量 message，除非您 post 将其添加到您的网站。

EJS 只在加载时呈现，所以也许你应该看看 AngularJS 或者简单地使用 document.querySelector("body").innerHtml = message; 将消息放入你的正文中。

这是一个工作示例：

var message;
function ajaxCallToServer() {
    var xmlhttp = new XMLHttpRequest(); 
    var url = "something"
    xmlhttp.open("GET", url, true);
    xmlhttp.setRequestHeader("Content-type", "application/json");
    xmlhttp.onload = (res) => {
        console.log(res['target']['response']);
        message = res['target']['response'];
        document.querySelector("body").innerHtml = message;
    };
    xmlhttp.send();
}

<body>
</body>

如何在 XMLHTTPRequest 之后在 HTML 页面上显示响应？

How to display response on HTML page after an XMLHTTPRequest?

html

javascript

ajax

onload

ejs