Question

我是JavaScript和AJAX中的新手。我正在尝试使用AJAX调用服务器并显示返回的HTML。但是，浏览器不显示HTML，而是显示HTML代码。我没有使用JQuery，我宁愿不使用它（时间紧缺，我完全不熟悉JQuery是坚持基本JavaScript的两个主要原因）。是否有某种方式来呈现HTML，因为它应该只使用基本的JavaScript。这是我的代码

function gotoNext(button){
try {
    xmlHttp = new XMLHttpRequest ();
}
catch (e) {
    try {
        xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
    }
    catch (el) {
        try {
            xmlHttp = new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch (el1) {
            alert ("Your browser does not support AJAX! Please use a compatible browser!!");
        }
    }
}

xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
        var df = document.getElementById ("dataForm");
        var data = xmlHttp.responseText;
        df.innerText = data;
    }       
};

var id = document.editEnv.id.value;
var sId = document.editEnv.sId.value;
var fileName = document.editEnv.fileName.value;
var group = document.editEnv.group.value;

xmlHttp.open("POST", "newData.jsp", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlHttp.send ("flag=" + flag + "&id=" + id + "&sId=" + sId + "&fileName=" + fileName + "&group=" + group);

Answer 1

您应该使用df.innerHTML = data;

innerText只是将值设置/设置为纯文本。

Answer 2

您可以尝试将innerText替换为innerHTML不同之处在于innerText不包含任何HTML标记而innerHTML包含任何HTML标记。例如

Here is a <a href="what.html">link</a>

将显示：

Here is a link

如果你打电话给innerText。但是，如果您使用innerHTML进行调用，则会显示：

Here is a <a href="what.html">link</a>

Answer 3

df.innerHTML = data;

应该工作!! 因为使用innerHTML会在浏览器上呈现该html。

innerText只会将HTML代码显示为普通文本。

渲染通过JavaScript中的AJAX调用返回的HTML

3 个答案: