通過JavaScript中的AJAX調用返回的渲染HTML

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

您可以嘗試用innerHTML替換innerText的區別在於， innerText不包含任何HTML標記，而innerHTML則包含。 例如

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代碼顯示為普通文本。