6

PhoneGap で jQuery Mobile を使用しています。JSON データを (サーバーから) プルして、リスト ビューに入力する方法を教えてください。

4

4 に答える 4

8

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"
}

この構造体を使用して、この例では要求されたデータをループ処理し、順序付けられていないリストを作成して、本文に追加します。

于 2012-06-19T14:05:47.260 に答える
7

これを試してください：

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

}
于 2012-06-20T06:02:20.437 に答える
2 
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>タグです

于 2012-09-18T01:35:00.907 に答える
0

私は、後で電話のギャップを通過する JQM を使用して同様のプロジェクトに取り組んでいます。上記の回答は、ajax を使用して動的にデータを入力するために使用できますが、Jquery ajax には、DOM イベントを拡張するために構築された JQM イベントを処理する機能が実際には備わっていないため、JQM ajax をオーバーライドすることの意味には対処しません。私と同じようなジレンマに興味がある、または悩んでいる方は、以下のページがあなたのプロジェクトで情報に基づいた決定を下すのに役立つことを願っています.

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

于 2013-02-27T12:22:52.740 に答える