将JSON数据从数据库放到html

Question

为了检索我的所有数据库，我发出了一个简单的php/mysql请求，并将其编码为json。

我现在有一个：

[
   {
      "id":"1",
      "title":"Paris - New York",
      "desc":awesome food,
      "price":"5-10",
      "adress":"63 Rue du faubourg Saint-Denis",
      "map":"https:\/\/maps.google.com\/maps?f=q&source=s_q&hl=fr&geocode=&q=80+Rue+du+Faubourg+Saint-Denis,+Paris,+France&aq=0&oq=80+rue+du+faubour&sll=37.0625,-95.677068&sspn=36.778911,79.013672&t=m&ie=UTF8&hq=&hnear=80+Rue+du+Faubourg+Saint-Denis,+75010+Paris,+%C3%8Ele-de-France,+France&ll=48.873562,2.35491&spn=0.001866,0.004823&z=14&output=embed",
      "background":"pny.jpg"
   },
   {
      "id":"2",
      "title":"Urfam Durum",
      "desc":"des sandwichs Kurdes vraiment bons",
      "price":"5-10",
      "adress":"66 rue du faubourg Saint-Denis",
      "map":"google blabla",
      "background":"ud.jpg"
   }
]

我希望通过javascript/jquery (使用类似于$('').html())的方法在不同的DIV中随机显示一个帖子。

我期待着这样的结果：

<div class="span6 offset3 place">
      <h2>**"title":"Paris - New York"**</h2>

      <ul class="infos">
        <li class="prix">**"price":"5-10"**</li>
        <li class="adresse"><a href="#map" data-toggle="modal">**"adress":"63 Rue du faubourg Saint-Denis"**</a></li>
      </ul>
</div>

(**)之间的文本是指我希望显示数据的位置。

我觉得你有这个主意！任何帮助都是非常感谢的。

PS :英语，不是我的母语，所以请原谅我的错误。

Answer 1

  use JSON.parse() for parsing your json encoded data.


   $.ajax({ 
    url:"something.php",
    type:"POST",
    data:{data_You_send},
    success:function(data){

//this is your response that you retrieve

    var obj=JSON.parse(data)  //since the data that we have retrieved is in json_decoded format,we need to parse it

for(var i in obj){//to see all your data,try this for all fields
    console.log(obj[i].id+","+obj[i].title);//just for 2 fields for understanding purpose

$("#id").html(obj[0].id) or $("#id").text(obj[0].id)//assign innerHTML or content to respective elements by these jquery methods.
    }

如果有任何疑问，请随时询问！

Answer 2

可以在模板引擎(_template)中使用下划线库。因此，您可以传递整个对象并在模板中使用属性。

Answer 3

我建议您使用jquery模板github链接。

你也可以用

jQuery.each(json, function(i, v) {
    $('#containerDiv').append('<div class="span6 offset3 place"><h2>'+v.title+'</h2> <ul class="infos"><li class="prix">'+v.price+'</li> <li class="adresse"><a href="#map" data-toggle="modal">'+v.adress+'</a></li></ul></div>');
});

json在每个循环中都是您的数据