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

我建议您使用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 3

$(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 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?

将JSON数据从数据库放到html中

5 个答案: