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

Question

I am doing something like this, but its a bit pain to style. Is there any other way like using templates?

   <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>

Thank you

Answer 1

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

Answer 2

You can try it this way.

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

This is just an alternative way of doing it.

Maybe you can also instead of returning a json object, rather generate the html on the server side, return it and append the result.

Answer 3

I don't Know You'll only Looking some template engine or below solution can also help you 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

If you query the data in JSON-format it would be easier for you: cf. $.getJSON() http://api.jquery.com/jQuery.getJSON/ So it boils all down to

$.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(""));
});