Jak wypełnić widok listy jQuery Mobile danymi JSON z serwera?

Question

Używam jQuery Mobile z PhoneGap. Jak mogę pobrać dane JSON (z serwera) i zapełnić je do widoku listy.

Answer 1

Zobacz metodę jQuery.getJSON() pod numerami w3schools i jQuery API.

przykład z 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'); 
}); 

tym przykładzie, oczywiście, zależy od struktury pliku JSON:

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

Za pomocą tej konstrukcji, np przechodzi poprzez żądana danych, tworzy nieuporządkowaną listę i dołącza ją do treści.

Answer 2

spróbować tego:

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

}); 

Działa to doskonale dla mnie. Php wraca <li></li> tagi HTML jest to <ul id="ulListview"></ul> tag

Answer 4

pracuję nad podobnym projektem z wykorzystaniem JQM które będę przechodzącego przez szczelinę telefonu później. Powyższe odpowiedzi, choć mogą być używane do dynamicznego zapełniania danych przy użyciu ajax, jednak nie odnoszą się do konsekwencji nadpisania JQM ajax, ponieważ Jquery ajax nie jest naprawdę wyposażony w obsługę zdarzeń JQM, które są zbudowane w celu rozszerzenia zdarzenia DOM dla tych, którzy są zainteresowani lub podobnym dylematem, jak ja, mam nadzieję, że poniższa strona pomoże ci podjąć świadomą decyzję w twoim projekcie.

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