Question

我在我的网站上使用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和类感到内疚，因为我正在使用 Smarty模板引擎来处理我的所有其他非AJAX内容

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

Answer 1

如果你放一些示例代码会很有用。但是，如果我正确理解你，我会使用我的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 );

}

寻找更好的方法来设置使用AJAX检索的JSON对象数据的样式

1 个答案: