데이터베이스에서 JSON 데이터를 html로 변환

Question

모든 데이터베이스를 검색하기 위해 간단한 PHP/mysql 요청을 작성하여 json으로 인코딩했습니다.

나는 지금이 : 나는 무작위로 자바 스크립트/JQuery와하여 주입하여 내의 differents DIV에서 하나의 게시물을 표시 할

[ 
    { 
     "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" 
    } 
] 

($ ('')와 같은 뭔가를 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> 

텍스트는 (**) 나는 내 datas를 표시 할 위치를 의미

나는 생각을 가지고 있다고 생각합니다! 어떤 도움이 정말

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

나는 당신이 당신의 데이터 뭔가를 사용하는 것이 좋습니다 것

Answer 4

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

그것의 각 루프에

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을 사용할 수 있습니다 당신이 JQuery와 템플릿 github link 또한

를 사용하는 것이 좋습니다 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 데이터를 전송되는지 확인해야합니다. How do I use jquery templates with JSON data?