将 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 注入在我的差异 DIV 中随机显示单个帖子（使用 $('').html() 之类的东西）

我期待这样的结果：

<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

您可以将下划线库与模板引擎 (_template) 一起使用。因此，您可以传递整个对象并使用模板内的属性。

Answer 2

$(document).ready(function () {
    var json = [{
            "id": "1",
            "title": "Paris - New York",
            "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"
        }];
    //Select the DOM objects and assign text values.
    $('.place h2').text(json[0].title);
    $('.prix').text(json[0].price);
    $('.adresse a').text(json[0].adress);
});

jsFiddle Example

Answer 3

我推荐你使用jquery模板github link

你也可以使用

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都是你的数据

Answer 4

  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 5

我建议使用 jquery 之类的东西将数据检索到网页中。

$.ajax({
    url: "get_json_data.php",
    type: "GET",
    dataType: "json",
    success: function(data){
        // *** Do things here with the data ***
        console.log(data);
    },
    error: function(error){
         alert("Something is wrong :" + error);
    }
});

您必须确保您的 php 正在发送 JSON 数据。

header('Content-type: application/json');
echo $my_json_results;

查看这篇文章，了解如何在返回结果中使用模板： How do I use jquery templates with JSON data?