通过 ajax 将 DIV 内容加载为 HTML答案

【问题标题】：Loading DIV content via ajax as HTML通过 ajax 将 DIV 内容加载为 HTML
【发布时间】：2014-02-11 23:33:07
【问题描述】：

我想我有一个非常简单的问题，但我找不到解决方案。所以我想要的是通过 HTML 加载一个 DIV 内容。问题在于它不仅是文本，而且是图像。 ajax 调用返回 HTML 代码，但这在 DIV 中显示为 HTML 并且不执行。很难解释，但从例子中很明显...... AJAX 调用返回字符串：

<img src="/images/weather/1.png" width="80px"><br>3.3 °C

问题很明显。我得到的是实际代码，而不是图像和 div 中的 3.3°C，所以我看到的不是图像 img src=....

我知道我需要以某种方式解码 HTML，但我不知道如何做到这一点，非常感谢任何帮助。

我的 Javascript 代码是：

var xmlhttp;
if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        newtext = xmlhttp.responseText;
    }
}
xmlhttp.open("GET", "message_ajax.php", true);
xmlhttp.send();
$('#text').fadeOut(function () {
    $(this).text(newtext).fadeIn();
})

【问题讨论】：

如果没有看到您的 Javascript 代码，我们如何提供帮助？将返回的字符串插入 DOM 时的部分。
var xmlhttp; if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 的代码 xmlhttp=new XMLHttpRequest(); } else {// IE6、IE5 的代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { newtext = xmlhttp.responseText; } } xmlhttp.open("GET","message_ajax.php",true); xmlhttp.send(); $('#text').fadeOut(function(){ $(this).text(newtext).fadeIn(); }) }
在您的问题下使用edit 并将代码粘贴到那里 - 将更具可读性:)。

标签： javascript jquery ajax dom-manipulation

【解决方案1】：

你在寻找这样的东西吗？ https://api.jquery.com/load/

您可以使用 ajax 将 HTML 加载到 DIV 中。好像是你要问的...

$( "#result" ).load( "ajax/test.html" );

您的 ajax/test.html 文件包含的位置

<img src="/images/weather/1.png" width="80px">

已编辑...更具体。这是使用 jQuery。

【讨论】：

我没有看到问题中提到的jQuery......绝对不需要解决这个问题。
投反对票？很确定这正是问题所在。请详细说明为什么不是“通过 ajax 将 DIV 内容加载为 HTML”？
使用 jQuery 有什么问题？给猫剥皮的多种方法。这只是一个简单问题的简单解决方案。
删除了我的反对意见，因为 cmets 中发布的代码表明 OP 实际上正在使用 jQuery。当问题没有提到 jQuery 并且没有必要解决问题时，我通常会在发布 jQuery 解决方案时投反对票。

【解决方案2】：

您应该使用$(this).html(newtext) 而不是$(this).text(newtext)。

它们完全不同。 .text() 将“转义”您的 HTML 并将其作为简单文本插入。或如文档所述：

我们需要注意这个方法会转义提供的字符串必要的，以便它可以在 HTML 中正确呈现。为此，它调用 DOM 方法 .createTextNode()，不会将字符串解释为 HTML。

您应该始终先阅读文档。

如果您已经在使用 jQuery，您可以使用它的 AJAX methods，这会让您的生活更轻松。

【讨论】：

【解决方案3】：

document.getElementById("divId").innerHTML = "<img ..........";

或

$("#divId").html("<img ..........");

【讨论】：