Wie befüllen Sie eine jQuery Mobile Listenansicht mit JSON-Daten vom Server?

Question

Ich benutze jQuery Mobile mit PhoneGap. Wie kann ich JSON-Daten (von einem Server) abrufen und in eine Listenansicht auffüllen?

Answer 1

Schauen Sie sich die Methode jQuery.getJSON() unter w3schools und jQuery API an.

Beispiel von 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'); 
}); 

Dieses Beispiel, natürlich, stützt sich auf die Struktur der JSON-Datei:

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

unter Verwendung dieser Struktur, die zB durch die angeforderte Schleifen Daten, erstellt eine ungeordnete Liste und hängt es an den Text an.

Answer 2

versuchen diese:

$.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(); 

}); 

Dies funktioniert für mich perfekt. Die PHP kehrt <li></li> Tags Die HTML ist einen <ul id="ulListview"></ul> Tag

Answer 4

ich an einem ähnlichen Projekt arbeitete JQM mit dem ich später durch Telefon Lücke vorbei sein würde. Die obigen Antworten können zwar verwendet werden, um Daten dynamisch mit ajax zu füllen, jedoch nicht die Implikationen des JQM-Ajax, da der Jquery-Ajax nicht wirklich für die JQM-Ereignisse geeignet ist, die das DOM-Ereignis für diejenigen erweitern, die das sind Interessiert oder in einem ähnlichen Dilemma wie ich, hoffe ich, dass die folgende Seite Ihnen hilft, eine informierte Entscheidung mit Ihrem Projekt zu treffen.

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