Question

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

Answer 1

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

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');
});
当然，这个例子依赖于JSON文件的结构：
{
  "one": "Singular sensation",
  "two": "Beady little eyes",
  "three": "Little birds pitch by my doorstep"
}
使用此结构，示例循环遍历请求的数据，构建一个无序列表，并将其附加到正文中。

Answer 2

试试这个：

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

});

这对我来说很有效。 php正在返回<li></li>个标签 html是<ul id="ulListview"></ul>代码

Answer 4

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

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

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

4 个答案: