Come popolare una vista elenco jQuery Mobile con dati JSON dal server?

Question

Sto usando jQuery Mobile con PhoneGap. Come posso estrarre i dati JSON (da un server) e popolarli in una vista elenco.

Answer 1

Dai un'occhiata al metodo jQuery.getJSON() su w3schools e jQuery API.

Esempio da jQuery API:

$.getJSON('ajax/test.json', function(data) { 
    var items = []; 

    $.each(data, function(key, val) { 
    items.push('<li id="' + key + '">' + val + '</li>'); 
    }); 

    $('<ul/>', { 
    'class': 'my-new-list', 
    html: items.join('') 
    }).appendTo('body'); 
}); 

Questo esempio, ovviamente, si basa sulla struttura del file JSON:

{ 
    "one": "Singular sensation", 
    "two": "Beady little eyes", 
    "three": "Little birds pitch by my doorstep" 
} 

Usando questa struttura, l'esempio loop attraverso la richiesta dati, crea un elenco non ordinato e lo aggiunge al corpo.

Answer 2

provare questo:

$.ajax({                 
    type: "POST",                   
    url: "your_url", 
    contentType: "application/json; charset=utf-8",                
    dataType: "json", 
    success:successFunction,            
    error: function(msg) {    

     alert(msg.statusText); 

    } 
}); 

function success:successFunction(data){ 

    var html =''; 
    $.each(data.d, function(index, item) { 
     html += '<li><a href="#">' + item.Your_data+ '</a></li>'; 
    }); 

    $('#ul_id').append($(html)); 


    $('#ul_id').trigger('create');  
    $('#ul_id').listview('refresh'); 

} 

Answer 3

function makeList() { 
    $.post("http://example.com/getlist.php", 
     function(resultfromphp) { 
      $('#ulListview').append(resultfromphp); 
      $('#ulListview').trigger('create');  
      $('#ulListview').listview('refresh'); 
    }); 
} 

$("#pageName").live('pagebeforeshow', function(event) { 
    makeList(); 

}); 

questo funziona perfettamente per me. Il PHP sta tornando <li></li> tag L'HTML è un <ul id="ulListview"></ul> tag

Answer 4

Sto lavorando su un progetto simile utilizzando jQm che vorrei passare per gap telefono in seguito. Le risposte sopra possono essere utilizzate per popolare i dati dinamicamente usando ajax, tuttavia non affrontano le implicazioni di ignorare l'ajax JQM poiché Jquery ajax non è realmente equipaggiato per gestire gli eventi JQM che sono costruiti per estendere l'evento DOM per coloro che sono interessato o in un dilemma simile come me, spero che la pagina seguente ti aiuti a prendere una decisione informata con il tuo progetto.

http://jquerymobile.com/demos/1.2.0/docs/pages/page-dynamic.html