0

我想使用 json 调用从 php 页面中检索数据，并使用 jquery mobile 在列表视图中显示它。我能够检索数据并且也能够在列表中显示，但我面临的问题是：我的数据在 php 文件中是这样的：([{"id":"1","name":"Big Ben" ,"纬度":"51.500600000000","经度":"-0.124610000000"},{"id":"4","name":"哈德良长城","纬度":"55.024453000000","经度":" 2.142310000000"},{"id":"2","name":"巨石阵","纬度":"51.178850000000","经度":"-1.826446000000"},{"id":"3","name ":"多佛白崖","纬度":

当我在列表中显示它时，它只显示在列表的一行中。我怎样才能在单独的行中显示关于它们的“id”的数据？

4

2 回答 2

0 
var i;

for(i = 0; i < data.length; i+=1) {
    // do whatever here, the id is in data[i].id
    console.log(data[i].id);
}

既然您提到您使用的是 jQuery mobile，也许您会将<li>元素附加到列表视图，在这种情况下，您将.append在<ul data-role=listview>.

编辑：根据您的评论，将您的每个功能更改为：

$.each(data, function(i, item) {
     $('ul').append('<li><h1>' + item.name + '</h1><p>' + item.latitude + '<br>' + item.longitude + '</p></li>');
});

并<li><a id="output"> </a></li>从 HTML 代码中删除。

但是，如果页面上有多个<ul>元素，它将不起作用，因此建议id在正确的<ul>元素上设置一个。

于 2012-11-22T08:43:37.737 回答
0 
$(document).ready(function(){
$(document).bind('deviceready', function(){
    //Phonegap ready
    onDeviceReady();
});

var output = $('#output');

$.ajax({
    url: 'http://samcroft.co.uk/demos/updated-load-data-into-phonegap/landmarks.php',
    dataType: 'jsonp',
    jsonp: 'jsoncallback',
    timeout: 5000,
    success: function(data, status){
        $.each(data, function(i,item){ 
            var landmark = '<h1>'+item.name+'</h1>'
            + '<p>'+item.latitude+'<br>'
            + item.longitude+'</p>';

            output.append(landmark);
        });
    },
    error: function(){
       output.text('There was an error loading the data.');
    }
});

});

于 2012-11-22T08:47:40.030 回答