Question

我正在尝试使用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。

我认为我很接近，但错过了最后的画龙点睛。所有建议赞赏！汤姆

Answer 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'）转到此页面。

使用JSON为JQTouch加载外部数据

1 个答案: