如何使用来自服务器的 JSON 数据填充 jQuery Mobile 列表视图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11100531/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to populate a jQuery Mobile list view with JSON data from server?
提问by StoneHeart
I'm using jQuery Mobile with PhoneGap. How can I pull JSON data (from a server) and populate it into a list view.
我正在使用 jQuery Mobile 和 PhoneGap。如何提取 JSON 数据（从服务器）并将其填充到列表视图中。
回答by Baris Akar
Have a look at the jQuery.getJSON() method on w3schoolsand 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:
{ "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.
$.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" }使用此结构，该示例遍历请求的数据，构建一个无序列表，并将其附加到正文中。
回答by stay_hungry
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');
}
回答by nilloc
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 正在返回<li></li>标签 html 是一个<ul id="ulListview"></ul>标签
回答by Wilson Alwaris
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 并未真正具备处理 JQM 事件的能力，这些 JQM 事件是为那些为扩展 DOM 事件而构建的感兴趣或像我一样遇到类似的困境，我希望下面的页面可以帮助您对您的项目做出明智的决定。
http://jquerymobile.com/demos/1.2.0/docs/pages/page-dynamic.html
http://jquerymobile.com/demos/1.2.0/docs/pages/page-dynamic.html
