jQuery MobileのリストビューにサーバーのJSONデータを挿入するにはどうすればよいですか？

Question

私はPhoneGapでjQuery Mobileを使用しています。 JSONデータをサーバーから取得してリストビューに取り込むにはどうすればよいですか。

Answer 1

w3schoolsとjQuery APIのjQuery.getJSON（）メソッドを見てください。 jQueryのAPIから

例：例は、要求をループし、この構造を使用して

{ 
    "one": "Singular sensation", 
    "two": "Beady little eyes", 
    "three": "Little birds pitch by my doorstep" 
} 

：

$.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ファイルの構造に依存しています は、順序なしリストを作成し、本文に追加します。

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は、HTMLは私が後で電話ギャップを通過することになるJQMを使用して同様のプロジェクトに取り組んでいます<ul id="ulListview"></ul>タグ

Answer 4

ある <li></li>タグを返しています。上記の答えは、ajaxを使ってデータを動的に取り込むために使用することはできますが、JQuery ajaxはDOMイベントを拡張するために構築されたJQMイベントを扱う際には実際には装備されていないため、私のような興味深い、あるいは同様のジレンマで、私はあなたのプロジェクトで情報に基づいた決定を下すのに役立つことを願っています。

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