使用JSON数据将HTML附加到文档的正确方法

时间:2016-05-28 07:43:19

标签: javascript jquery html

我有一个JSON格式的AJAX响应,如下所示:

{
  "color":"DEDE54",
  "text":"<p>some text<\/p>"
}`

我想以格式化的HTML附加它。下面我只是在字符串comment中包含所有HTML,并添加它们应该去的变量。它有效,但它看起来很乱,而且不可读。

我应该这样做吗?

  appendResponse:function (response) {
    if (response !== 'wait'){
      var color = response.color;
      var text = response.text;
      var comment = '<div class="comment"><div class="avatar" style="background:#'+color+'"></div><div class="text">'+text+'<div class="date">Just now</div></div></div>';
      $('#comment-form').after(comment);
    } else {
      Materialize.toast('Wait 20 seconds between comments', 5000, 'toast-alert');
    }
  }

1 个答案:

答案 0 :(得分:0)

我认为这不是那么糟糕。 一些可能的解决方案是:

  • 创建一个以响应为参数并返回的函数 string:你移动&#34; mess&#34;到一个地方,你保持你的 &#34;主&#34;代码清洁
  • 模板字符串(如@dfsq所述):它们可以让您保持代码清洁但是他们也有他所说的问题
  • 逐个动态创建并包含每个元素:

例如:

var comment = jQuery('<div/>', {
    class: 'comment'
});

var avatar = jQuery('<div/>', {
    class: 'avatar'
});

$avatar.css("background-color",response.color);
avatar.appendTo(comment);
.....
.....


但是,我想指出的一件事是您的代码似乎容易受到XSS的攻击:直接从Web服务中包含HTML元素并不是一个好习惯,因为您可以&# 39; t转义字符(防止XSS的更好,更简单的方法)。也许你已经知道了,但万一你没有,请照顾它