0

我在我的网站中使用 AJAX 来获取由 PHP 脚本生成的 JSON 字符串。JSON 对象类似于：

{
  "people" : [
    { "name" : "Bob", "id" : "1", "sex" : "m" }, 
    { "name" : "Amy", "id" : "2", "sex" : "f" }
  ]
}

一旦我使用 AJAX 检索它，我将使用 Javascript 手动设置它的样式

for(i = 0; i < obj.people.length; i++) {
  document.getElementById('people-container').innerHtml += '<span class=\'' + obj.people[i].sex + ' person\'>' + obj.people[i].name + '</span>
}

但我不禁对在我的 Javascript 中嵌入 HTML 和类感到内疚，因为我对所有其他非 AJAX 内容都使用了Smarty 模板引擎。

我想我不能将 Smarty 用于我的 AJAX 响应，因为模板引擎在页面加载时运行，并且 AJAX 调用在页面加载后完成......有没有更好的方法可以做到这一点？

4

1 回答 1

0

如果你放一些示例代码会很有用。但是，如果我对您的理解正确，我会使用我的 AJAX 调用返回如下内容：

{
  "html": "<span>...${sex}.. ${name}</span>",
  "people" : [
    { "name" : "Bob", "id" : "1", "sex" : "m" }, 
    { "name" : "Amy", "id" : "2", "sex" : "f" }
  ]
}

然后，您可以使用您的 JS 将标记附加到您想要的任何模板引擎的页面。显然，您也可以遍历返回的数据，这将利用模板。

// Don't append more than once if multiple ajax calls
if ( !document.getElementById( 'people-template' ).length ) {

  // Append template to page
  var script = document.createElement('script');
  script.type = 'text/html';
  script.id = "people-template";
  document.body.appendChild( script );

}

for(i = 0; i < obj.people.length; i++) {

  // Using jQuery + jQuery templating here as an example
  // Never used smarty but I hope this shows you the idea well enough
  $('#people-container').innerHtml += $('#people-template').tmpl( obj );

}
于 2013-09-04T03:25:40.887 回答