智能手机 Web 开发入门

实现 AJAX

当我们只需要从服务器端数据库表中插入或获取数据时，我们通常会实现 AJAX，从而提高性能。

假设我们想显示用户输入的 ISBN 号的详细图书信息。这些数据已存储在服务器端的 books 数据库表中。

我们需要两样东西来获取数据

• 一个调用 AJAX 方法的函数
• 一个服务器端 PHP 脚本

调用 AJAX 方法

要实现 AJAX，我们需要调用 ajax() 方法，我们将通过创建一个名为 showdetails 的函数来实现。用户输入的 ISBN 号将作为参数传递给 showdetails。showdetails 的代码显示在列表 1 中。

列表 1. 调用 ajax() 方法

function showdetails(isbn)
{
    $.ajax({
        type:"POST",
        url:"getdetails.php",
        data: 'isbn='+isbn,
        success:function(html){
           $('#bookdetails').append(html);
           jQT.goTo('#bookdetailsdisplay',
'slide');
        }
    });
    return
false;
}

ajax() 方法通过 HTTP 请求加载远程页面，并创建并返回与服务器进行异步通信所需的 XMLHttpRequest 对象。ajax() 方法接受一个参数，即一个键/值对对象，该对象用于初始化和处理请求。ajax() 方法的语法是

.ajax( object of key/value pairs )

表 1 显示了 ajax() 方法中常用的键/值对的简要说明。

表 1. ajax() 方法中使用的键值对

data:'variable1=value1&variable2=value2.....'; 

var cat=$('.category').val();
  var subcat=$('.subcategory').val();
  data: 'category='+cat+'&subcategory='+subcat,

var data='category='+cat+'&subcategory='+subcat;
  data: data,

列表 1 中涉及的步骤如下

1. showdetails 函数中的代码通过 ajax() 方法调用请求。
2. 在 ajax() 中，我们指定我们将使用的请求方法是 POST ，并且将要执行的服务器端脚本文件的名称是 getdetails.php。
3. <![endif]>我们创建一个 data string ，传递给 PHP 脚本，该脚本包含一个 isbn 变量，其值设置为传递给函数的 isbn 的值。
4. data string 反过来将 isbn 号传递给脚本文件 getdetails.php 。
5. 该脚本从 books 表中获取相应的 ISBN 信息并生成适当的输出。如果传递给脚本的请求成功，则 success 回调函数将被执行。脚本的输出将被分配给回调函数的 html 参数。
6. 然后将 html 参数的内容附加到 bookdetails div 元素以显示结果。我们假设存在一个 id bookdetails 的 div 嵌套在 id bookdetailsdisplay 的 div 内。
7. 语句 jQT.goTo('#bookdetailsdisplay', 'slide'); 以幻灯片动画导航到 bookdetailsdisplay 面板，以显示 getdetails.php 脚本生成的响应。
8. 最后，我们向 showdetails 函数返回 false 值 以抑制默认的浏览器点击行为。我们将在下面更详细地解释这段代码。

假设 showdetails 是通过此处创建的按钮的点击事件调用的

<a class="whiteButton" href="#"
onclick="showdetails('11111-1111-1111');"> Show

    Details</a>

一个名为 Show Details 的按钮是通过将 whiteButton 分配给超链接来创建的。点击时，此按钮会调用 showdetails 函数，并将参数“11111-1111-1111”传递给它。我们希望抑制默认的浏览器点击行为，因此我们从 showdetails 函数返回 false 。

服务器端 PHP 脚本

服务器端 PHP 脚本是获取过程的核心。脚本文件 getdetails.php 读取通过 data 传递给它的 isbn 号，并将使用此值从 books 表中获取详细的图书信息 。脚本将生成要在面板中显示的输出。getdetails.php 的代码显示在列表 2 中。

列表 2. getdetails.php

<?php
    $isbn =trim($_REQUEST['isbn']);
    $connect=mysql_connect("localhost","root", "mce") or die ("Please check your server 
       connection");
    mysql_select_db("shopping");
    $query="Select isbn, title, author1, author2, author3, publisher, 
       publish_date_edition, price, image, description from books where isbn ='$isbn'";
    $results =mysql_query($query) or die (mysql_query());
    while ($row=mysql_fetch_array($results))
    {
       extract ($row);
       echo '<fieldset style="background-color:white; color:black;">';
       echo '<img src=' . $image .'>';
       echo '<h3>' . $title . ' by </h3>';
       echo '<h4>' . $author1 . '</h4>';
       if($author2 !='NULL')
           echo '<h4>' . $author2 . '</h4>';
       if($author3 !='NULL')
           echo '<h4>' . $author3 . '</h4>';
       echo '<label>Publisher :</label><h4>' . $publisher . '</h4>';
       echo '<h4>' . $publish_date_edition . '</h4>';
       echo '<label>Price: </label>';
       echo '<em>' . $price . '</em><br/>';
       echo '<label>Book Details :</label><h4>' . $description . '</h4>';
       echo '</fieldset>';
   }
?>

我们可以看到脚本的上述代码执行以下操作

• 从 $_POST 数组中检索 isbn 的值并将其存储在变量 $isbn 中。
• 使用 root 作为用户和 mce 作为密码连接到 MySQL 服务器。
• 选择 shopping 数据库使其成为活动状态。
• 编写一个查询来获取具有提供的 ISBN 号的图书的信息。
• 执行查询并将结果存储在 $result array 中。
• 从 $result 中检索一行并将其存储在 $row 变量中。
• 提取包含检索到的行字段的 $row 。
• 在字段集中显示 $row 的字段中的信息。

请记住，此 PHP 脚本显示的详细信息将返回给 success 回调函数的 html 参数（请参阅列表 1）。分配给 html 参数的详细图书信息然后被附加到 bookdetails div 元素以进行显示。 

有关更多信息，请参阅我的书：“智能手机 Web 开发入门：使用 PHP、MySQL 和 jQTouch 开发 Web 应用程序”，可在 Amazon 购买。

历史

• 2010 年 9 月 24 日：初始版本