¿Cómo llenar una vista de lista jQuery Mobile con datos JSON del servidor?

Question

Estoy usando jQuery Mobile con PhoneGap. ¿Cómo puedo extraer datos JSON (de un servidor) y llenarlos en una vista de lista?

Answer 1

Eche un vistazo al método jQuery.getJSON() en w3schools y jQuery API.

Ejemplo de API jQuery:

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

Este ejemplo, por supuesto, depende de la estructura del archivo JSON:

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

Utilizando esta estructura, el ejemplo bucles a través de la solicitada data, crea una lista desordenada y la agrega al cuerpo.

Answer 2

prueba este:

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

}); 

Esto funciona perfectamente para mí. El PHP está volviendo <li></li> etiquetas El HTML es una etiqueta

Answer 4

<ul id="ulListview"></ul> estoy trabajando en un proyecto similar utilizando JQM la que estaría pasando a través del hueco de teléfono más adelante. Las respuestas anteriores aunque se pueden usar para rellenar datos dinámicamente utilizando ajax, sin embargo no abordan las implicaciones de anular JQM ajax ya que Jquery ajax no está realmente equipado para manejar los eventos JQM que se construyen para extender el evento DOM para aquellos que están interesado o en un dilema similar al mío, espero que la página siguiente te ayude a tomar una decisión informada con tu proyecto.

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