javascript - 使用模板库从 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

如果您以 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(""));
});

Answer 3

你可以这样试试。

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

这只是一种替代方法。

也许您也可以不返回 json 对象，而是在服务器端生成 html，将其返回并附加结果。

Answer 4

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

 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);
 }