JSONを使用してJQTouchアプリケーションに外部データを読み込もうとしています。私の問題は、私はどんなjsを使うべきか、どこに置くべきかを知らないということです。JQTouch用のJSONを使用した外部データの読み込み
私のHTMLは非常にシンプルです - アプリ内のいくつかのdiv。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.4.2"); </script>
<script type="text/javascript" src="jqtouch/jqtouch.min.js" charset="utf-8"></script>
<script type="text/javascript"> $.jQTouch(); </script>
<script src="javascripts/cricket.js" type="text/javascript"></script>
<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "themes/apple/theme.css";</style>
<title>Cricket</title>
</head>
<body>
<!-- "Main Menu" -->
<div id="home" class="current">
<div class="toolbar">
<h1>Cricket</h1>
</div>
<ul class="rounded">
<li class="arrow"><a href="#clubs">Clubs</a></li>
<li class="arrow"><a href="#fixtures">Fixtures</a></li>
<li class="arrow"><a href="#twitter">Twitter</a></li>
</ul>
<ul class="rounded">
<li class="arrow"><a href="#about" class="slideup">About</a></li>
</ul>
</div>
<!-- "Clubs" - Will contain the list of clubs -->
<div id="clubs">
<div class="toolbar">
<h1>Clubs</h1>
<a class="button back" href="#">Back</a>
</div>
<div id="clubslist">
Loading....
</div>
</div>
<!-- "Fixtures" - Will contain the list of fixtures -->
<div id="fixtures">
<div class="toolbar">
<h1>Fixtures</h1>
<a class="button back" href="#">Back</a>
</div>
<ul class="rounded">
<li>Loading....</li>
</ul>
</div>
<!-- "Twitter" - Will contain the tweets -->
<div id="twitter">
<div class="toolbar">
<h1>Twitter</h1>
<a class="button back" href="#">Back</a>
</div>
<ul class="rounded">
<li>Loading tweets....</li>
</ul>
</div>
<!-- "About" - Will contain info about the app/contact -->
<div id="about">
<div class="toolbar">
<h1>About</h1>
<a href="#" class="back">Back</a>
</div>
just some text
</div>
その後、これは私が(clubs.phpから)外部データをロードするために使用する必要があると思うスクリプトです。
<script type="text/javascript">
$.getJSON('http://www.mydomain.com/clubs.php', function(data) {
$.each(data, function(i,item){
$('clubslist').append('<li>' + item.club_name + '</li>');
});
});
</script>
私の質問はどこに置く必要があり、どのようにトリガーされるのですか? 私はこれを別のJSファイルに入れる必要があると思います(私はすでにhtmlファイルの先頭にリンクしているcricket.jsというファイルを持っています)。それから、JSAを起動させて、PageAnimationEndなどのようなものを必要とすると思いますか?何が価値がある、これはclubs.phpが私の理想的な状況は、ユーザーがメニュー・ページの「クラブ」リンクをクリックしたときに、これはどこのページのアニメーションを発射することである
{"posts":[{"post":{"club_id":"1","club_name":"ABC Cricket Club","club_postcode":"AB12 3DE"}},{"post":{"club_id":"2","club_name":"Beston Cricket Club","club_postcode":"NG1 9XY"}}]}
を返すものですについては
ユーザーは「読み込み中」と表示されます。バックグラウンドでは、Javascriptが起動され、clubs.phpからデータが取得され、#clublist divに追加されます。
私は近くにいると思うが、最終的な仕上げのタッチを欠いている。すべての提案が高く評価されました! Tom
大変、ありがとう、私はそれを行こう。私はあなたが実際にPHPファイルのテーブルhtmlをフォーマットしたと思うのですか?そして、完成したhtmlテーブルをアプリケーションに渡しますか? – Hardball