Question

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

<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

你是对，＆＃39;留言＆＃39;当你调用它时为null。

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

<强> HTML ：

<p id="test">

</p>

JS（ES6）：

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

test.innerHTML = "Tested";

小提琴：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，除非您将其发布到您的网站。

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页面上显示响应？

2 个答案: