使用模板庫從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(""));
});