使用模板库从ajax请求接收json数据后生成html代码的最佳方法是什么？

Question

我正在做这样的事情，但风格有点痛苦。 有没有其他方式使用模板？

   <div id="resultpanel"></div>

    <script>
    function parseData(jsonresults){
        var results = JSON.parse(jsonresults);
        jQuery("#resultpanel").empty();

        for(var i=0;i<results.length;i++){
            var divph = document.createElement("div");
            var img = document.createElement("img");
            var p = document.createElement("p");

            img.src=results[i].logoname;
            p.innerHTML=results[i].perigrafh;
            jQuery(divph).append(img);
            jQuery(divph).append(p);            
            jQuery("#resultpanel").append(divph);   

        }       
     }
    </script>

谢谢

Answer 1

您可以查看underscore templates以获得非常简单的内容，或者像mustache.js或handlebars.js这样的内容，以获得更复杂的内容。

Answer 2

你可以这样试试。

var html = "<div><img src=" + results[i].logoname + "/><p>" + results[i].perigrafh + "</p></div>"; 
jQuery("#resultpanel").append(html);

这只是另一种方法。

也许你也可以代替返回一个json对象，而不是在服务器端生成html，返回它并附加结果。

Answer 3

我不知道你只会看一些模板引擎或以下解决方案也可以帮助你simplfy。

 var Main= jQuery("#resultpanel");
for(var i=0;i<results.length;i++){
    var html="";
     html="<div><img src="+results[i].logoname+ "/><p>"+results[i].perigrafh+"</p></div>";
     Main.append(html);
 }

Answer 4

如果您以JSON格式查询数据，那么对您来说会更容易：cf。 $ .getJSON（） http://api.jquery.com/jQuery.getJSON/所以它归结为

$.getJSON(sourceUrl, function(results){
    elems=result.map(function(o){return "<div><img src='"+o.src+"'></img><p>"+o.perigrafh+"</p></div"});
    $("#resultpanel").html(elems.join(""));
});