为 JQTouch 使用 JSON 加载外部数据答案

【问题标题】：Loading external data using JSON for JQTouch为 JQTouch 使用 JSON 加载外部数据
【发布时间】：2011-12-17 10:51:12
【问题描述】：

我正在尝试使用 JSON 将一些外部数据加载到 JQTouch 应用程序中。我的问题是不知道用什么js，不知道放哪里。

我的 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 文件中（我已经有一个名为 cricket.js 的文件，我在 html 文件的头部链接到它）。然后我假设我需要一些东西来触发 JS 运行......比如 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。

我想我已经接近了，但错过了最后的点睛之笔。所有建议表示赞赏！汤姆

【问题讨论】：

标签： json jqtouch

【解决方案1】：

在我的页面中，我执行以下操作，在此示例中，我从后端脚本中提取一个表。

  function prevOrders()
  {
  $("#chkPrevOrd").html('Please wait')  
  $.ajax({
        type: "POST",
        url: "http://"+document.domain+"/store.php",
        data: { method: "prevOrders"},      
        dataType: "json",
        timeout: ajaxTimeout,
        success: function(data){
        if (data.prevOrders)
            {
            $("#prevOrderStatus").html(data.prevOrders);
            $("#chkPrevOrd").html('Update')     
            }               
            },  
         error: function() {
        alert('This is taking too long. You could try again now, or wait and try again later.'); 

            }
 });     
  }

#prevOrderStatus 是这个页面上的一个 DIV，#chckPrevOrd 只是一个按钮，让用户知道发生了什么。如果#chkPrevOrd 实际上在不同的页面上，您将 JQT.Goto('cointainer div for #chkPrevOrd') 转到此页面。

【讨论】：

太好了，谢谢，我会试一试。我是否认为您实际上在 php 文件中格式化了表格 html，然后将完成的 html 表格传递给应用程序？