Question

我正在使用ajax从后端检索一些数据。我得到的结果是json。

然后我使用jquery将其添加到页面中：

$(...).append('<H3>' + data.title + '</H3>')

我刚刚意识到json数据不是HTML转义的，这很糟糕。

我该怎么办？

HTML转义从json中后端返回的所有数据？
连接字符串时，在前端进行所有转义吗？（即将所有外部数据包装在转义函数中）

选项1表示json中的数据实际上并不“正确”，它对HTML很有用，但它不包含实际数据。更糟糕的是，这意味着我不能只使用json_encode（） - 我首先必须遍历数组数据并逃避一切。

选项2似乎更复杂，我担心我可能会错过一个位置。另一方面，这是从SQL获取数据并在PHP中构建数据时所做的，所以我想我已经习惯了。

请不要建议：

$(...).append($('<H3></H3>').text(data.title))

当你有多层嵌套标签时，这种写法变得笨拙。我喜欢写HTML，而不是DOM调用。

PS。我知道我需要一个Javascript模板库，但是现在我需要使用字符串连接。

Answer 1

好吧，我在周末开发一个开源项目。我认为它符合您的要求。请在http://tog2html.com

查看

例如，在你的情况下，在获得json obj（var data）之后。你可以这样做：

$(...).append(
   Tog('div#main_div').h1('hello, ', data.name).h3().raw(data.title).html()
   // raw() is for escaping the data into something valid to be shown in html
)

possible output:
<div id='main_div'><h1>hello, some one</h1><h3>this is my blog title</h3></div>

Answer 2

这是一个简单的jQuery扩展，它使用html擒纵机构添加$append()格式化方法：

(function( $ ){
  $.fn.$append = function()
  {
    var out = arguments[0];
    for (var i = 1; i < arguments.length; ++i) 
      out = out.replace("{" + arg + "}", arguments[arg].toString().htmlEscape());
    this.append(out);
  };
})( jQuery );

使用此方法，您可以写：

$(...).$append('<H3>{1}</H3>', data.title);

数据将被转义。根据您的口味加入盐和胡椒粉。

更新：您还需要：

String.prototype.htmlEscape = function() {
   return this.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

HTML转义从ajax / json返回的数据

2 个答案: