如何使用服务器的JSON数据填充jQuery Mobile列表视图？

I'm using jQuery Mobile with PhoneGap. How can I pull JSON data (from a server) and populate it into a list view.

我正在使用带有PhoneGap的jQuery Mobile。如何从服务器中提取JSON数据并将其填充到列表视图中。

4 个解决方案

#1

Have a look at the jQuery.getJSON() method on w3schools and jQuery API.

看看w3schools和jQuery API上的jQuery.getJSON（）方法。

Example from jQuery API:

来自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');
});
This example, of course, relies on the structure of the JSON file:

当然，这个例子依赖于JSON文件的结构：
{
  "one": "Singular sensation",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}
Using this structure, the example loops through the requested data, builds an unordered list, and appends it to the body.

使用此结构，示例循环遍历请求的数据，构建无序列表，并将其附加到正文。

#2

try this one:

试试这个：

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

}

#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();

});

This works perfectly for me. The php is returning <li></li> tags The html is a <ul id="ulListview"></ul> tag

这对我来说很完美。 php正在返回

标签html是

标签html是标签

#4

I am working on a similar project using JQM which I would be passing through phone gap later on. The above answers although can be used to populate data dynamically using ajax, however don't address the implications of overriding the JQM ajax as the Jquery ajax is not really equipped at handling the JQM events which are built to extend DOM event for those who are interested or in a similar dilemma like me, I hope the below page helps you to take a informed decision with your project.

我正在使用JQM开展一个类似的项目，稍后我会通过手机间隙。上面的答案虽然可以用来使用ajax动态填充数据，但是没有解决覆盖JQM ajax的含义，因为Jquery ajax在处理为扩展DOM事件而构建的JQM事件时并没有真正的配备。感兴趣或像我这样的类似困境，我希望下面的页面可以帮助您对项目做出明智的决定。

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

#1