Làm thế nào để điền một khung nhìn danh sách jQuery Mobile với dữ liệu JSON từ máy chủ?

Question

Tôi đang sử dụng jQuery Mobile với PhoneGap. Làm thế nào tôi có thể kéo dữ liệu JSON (từ một máy chủ) và đưa nó vào một khung nhìn danh sách.

Answer 1

Hãy xem phương thức jQuery.getJSON() trên w3schools và jQuery API.

Ví dụ từ 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'); 
}); 

Ví dụ này, tất nhiên, dựa vào cấu trúc của tệp JSON:

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

Sử dụng cấu trúc này, ví dụ vòng qua các yêu cầu dữ liệu, tạo danh sách không có thứ tự và gắn nó vào cơ thể.

Answer 2

thử này một:

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

}); 

này hoạt động hoàn hảo cho tôi. Các php đang trở về <li></li> thẻ html là một thẻ <ul id="ulListview"></ul>

Answer 4

Tôi đang làm việc trên một dự án tương tự bằng cách sử dụng JQM mà tôi sẽ đi qua khoảng cách điện thoại sau này. Các câu trả lời trên mặc dù có thể được sử dụng để điền dữ liệu động bằng ajax, tuy nhiên không giải quyết các tác động của việc ghi đè JQM ajax khi Jquery ajax không thực sự được trang bị để xử lý các sự kiện JQM được xây dựng để mở rộng sự kiện DOM cho những người quan tâm hoặc trong tình huống khó xử tương tự như tôi, tôi hy vọng trang dưới đây giúp bạn đưa ra quyết định sáng suốt với dự án của bạn.

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