4

我从 jsonp 调用中获取 json 数据。数据恢复正常。一个数据元素是字符串形式，其中包含一些 html（“p”标签、“a”标签）。我正在尝试在 jQuery 对话框中输出此元素（图片描述）。出于某种原因，无论我是否使用 $.parseHTML，我都无法将其呈现为 html。

代码片段：

var image       = data.image;
var title       = data.title;
var id          = data.id;
var description = $.parseHTML( data.description );
var media       = data.media;
var secret      = data.secret;
if(media == "photo"){
    var string  = "<div id=\"picturebox\" class=\"picturebox\">\n";
    string += "    <img src=\""+image + "\" id=\"photo_"+id+"\" />\n";
    string += "    <h2>" + title + "</h2>\n";
    string += "    <p>" + description + "</p>\n";
    string += "</div>\n";
    $('#gbFullPic').html(string);
}

尽管动态生成的 div 正确显示，包括图像和标题，但“描述”行输出如下：[object Text]

如果我删除 $.parseHTML 输出如下所示：

Bird of paradise growing in south Florida.<p><a href="http://www.popgnology.com/guestbook.php">ACME Adventures</a></p>

如果我的 html 输出没有显示实际的 html 标签，那当然没问题。我究竟做错了什么？

更新（第 2 版）：我之前的解决方案不完整。这个问题比单个 jquery 或 javascript 解决方案更复杂。

问题始于服务器端，发送的 html 格式不正确

header('content-type: application/json; charset=utf-8');
echo $cid . '('.json_encode($data).')';

  • 在服务器端（PHP），我必须像这样调整我的“描述”项（注意添加 htmlspecialchars_decode 和添加斜杠包装器）：

      if($k == "description"){ 
    $data["$k"] = addslashes(htmlspecialchars_decode($v));
  }
  else{
    $data["$k"] = $v;
  }

  • 然后，这个 javascript 正确地呈现了 json 数据项：

    var description   = data.description.replace('\\','');

通过纠正服务器页面上的交付格式和在客户端使用 .replace 去除斜线的两步过程，“描述”正确地显示了 html 页面上的所有文本和 html 元素。

4

2 回答 2

5

我的猜测是您的 data.description 已转义，而 parseHTML 方法无法处理。查看此帖子以获取解决方案：

Javascript解码html实体

var text = '&lt;p&gt;name&lt;/p&gt;&lt;p&gt;&lt;span style="font-size:xx-small;"&gt;ajde&lt;/span&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;da&lt;/em&gt;&lt;/p&gt;';
var decoded = $('<div/>').html(text).text();
alert(decoded);

所以在你的情况下：

var decoded = $('<div/>').html(data.description).text();
$('#gbFullPic').html(decoded);
于 2013-04-29T23:38:41.287 回答
4

尝试var description = $($.parseHTML(data.description)).html();

jQuery 的parseHTML返回一个 DOM 节点数组。然后您可以将它们插入 DOM，但在您的情况下，您应该获取它们.html()并将其添加到您的字符串中。

于 2013-04-29T23:35:55.113 回答