6

私はJqueryMobileを使用してdreamviewerで基本的な「ニュース」アプリケーションを作成しています。

すべての設計を行いましたが、今度はAPIサーバーからアプリケーションにJsonデータを取得します。

これが私のAPIサーバーリンクです; fe "http：/ mywebapiurl"

getJsonについてJquery関数を作成する必要があると思いますが、作成方法がわかりませんか？

小さな記事の写真、記事のタイトル、記事の見出しを含むリストビューにどのように配置しますか？

これが、Jsonからのニュースを表示するリストビューのサンプルです。

<body> 
<div data-role="page" id="home">
<div data-role="header">
    <h1>Post Mobile</h1>
</div>
<div data-role="content">   
    <ul data-role="listview" data-inset="true">
                     <li><a href="#headline">
         <img src=ArticlePicture" class="ui-li-has-thumb"/>
         <h3>ArticleTitle</h3>
         <p>ArticleHeadline</p>
                     </a></li>
                </ul>       
</div>
      <div data-role="footer"  data-position="fixed">
      <h4>&copy; funky app </h4>
</div>

これが私が試したコードサンプルです;

    <script>
  $(document).ready(function() {
   $.getJSON("http://mywebapiurl", function(data) {
      var result= "";
      $.each(data.LatestNews, function(index, value) {
result+= "<ul><li><a href='#'><h3>"+value.TITLE+"</h3><p>"+value.SPOT+"</p></a></li></ul>"; 
});
    $("#articleContainer").html(result);
})
});
</script>

あなたの答えを待っています。

どうもありがとうございます。

4

2 に答える 2

15

動作中の jsFiddle の例: http://jsfiddle.net/Gajotres/8uac7/

$(document).on('pagebeforeshow', '#home', function(e, data){      
    $.ajax({url: "http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/The Goonies",
        dataType: "jsonp",
        async: true,
        success: function (result) {
            ajax.parseJSONP(result);
        },
        error: function (request,error) {
            alert('Network error has occurred please try again!');
        }
    });         
});


var ajax = {  
    parseJSONP:function(result){
        $.each( result, function(i, row) {
            $('#movie-data').append('<li><a href="#headline"><img src="http://www.incine.fr/media/photos_films/original/1285_4bc92529017a3c57fe00ee84_1293130970.jpg" class="ui-li-has-thumb"/><h3>' + row.original_name+ '</h3><p>' + row.overview+ '</p></a></li>');
        });
        $('#movie-data').listview('refresh');
    }
}

あなたの場合、dataType: "jsonp"をdataType : "json"に変更するだけです。

編集 ：

document readyと一緒に使用しないでくださいjQuery Mobile。通常、ページが に読み込まれる前にトリガーされますDOM。

これは、次のような適切な jQuery Mobile ページ イベントで修正できます。

$(document).on('pagebeforeshow', '#home', function(){      
  
});

ページ イベントとその仕組みについての詳細は、このARTICLEに記載されています。わかりやすくするために、これは私の個人的なブログです。または、こちらをご覧ください。

$.getJSON 対 $.ajax

特に私の例のようにページローダーを ajax したり、クロスドメイン呼び出しを行う必要がある場合は、jQuery Mobile$.ajaxでよりうまく機能するので、私はそれを好みます。しかし、すべて一緒にそれは同じです。show/hide

于 2013-03-18T12:33:38.313 に答える
0

何を試しましたか？JQuery は、json トピックであるスキーマに関して非常に単純です。

$(function() {
    $.getJSON('/api', function(data) {
        var $foo = $('#foo');
        for(vari=0; i<data.length; i++) {
            $foo.append('<div>'+data[i][title]+'</div>');
        }
    });
});
于 2013-03-18T12:20:54.447 に答える