最近一直在学jquery，当然也是鉴于对其ajax处理的着迷，简单快速！！所以把自己的学习笔记贴出来，一是巩固自己的知识，二是给大家参考！！！

 
在这一节中主要是练习ajax中的$.post("url",{key:value},callback())的使用。首先说明这是按照phpchina中的一篇文章练习的，原版：http://www.phpchina.com/index.php?action-viewnews-itemid-35556。另外这个练习主要是练习与数据库的数据交互。

 
第一步：在你的数据库中建立一个表，用来储存测试的信息：
 
  1. CREATE TABLE `directory` (   
  2. `id` INT NOT NULL AUTO_INCREMENT ,   
  3. `name` VARCHAR( 64 ) NOT NULL ,   
  4. `phone` VARCHAR( 16 ) NOT NULL ,   
  5. PRIMARY KEY ( `id` )      
  6. ) TYPE = MYISAM ; 
我们建立一个directory表来储存测试信息，然后我们向其中出入几条测试数据：
 
  1. insert into `directory` (name,phone) values ('Tom Smith', '512-555-0111');       
  2. insert into `directory` (name,phone) values ('Bill Smith', '512-555-0112');       
  3. insert into `directory` (name,phone) values ('John Smith', '512-555-0113');       
  4. insert into `directory` (name,phone) values ('Jane Smith', '512-555-0114');       
  5. insert into `directory` (name,phone) values ('Sara Smith', '512-555-0115'); 
到现在为止第一步也就完成了，接下来我们来进行第二步；
第二步：建立index.php文件代码如下：
  1. <html>   
  2.   <head>   
  3.     <title>Welcome to Ajax!!</title>   
  4.     <script type="text/javascript" src="./jquery.js"></script>   
  5.     <script type="text/javascript">   
  6.       $(document).ready(function(){   
  7.           $("#search_results").slideUp();   
  8.           $("#search_button").click(function(e){   
  9.             e.preventDefault();   
  10.             ajax_search();   
  11.             });   
  12.           $("#search_term").keyup(function(e){   
  13.             e.preventDefault();   
  14.             ajax_search();   
  15.             });   
  16.           });   
  17.       function ajax_search(){   
  18.         $("#search_results").show();   
  19.         var search_val=$("#search_term").val();   
  20.         $.post("./find.php",{search_term:search_val},function(data){   
  21.             if(data.length>0){   
  22.               $("#search_results").html(data);   
  23.             }   
  24.             }   
  25.         )   
  26.       }   
  27.     </script>          
  28.   </head>   
  29.  
  30.   <body>   
  31.     <h1> Search Our Phone Directory <h1>   
  32.     <form id="searchform"    method="post">   
  33.       <div >   
  34.         <label for="search_term">Search Name/Phone</label>   
  35.         <input type="text" name="search_term" id="search_term"/>   
  36.         <input type="submit" value="search" id="search_button"/>   
  37.       </div>   
  38.     </form>   
  39.     <div id="search_results"></div>   
  40.   </body>   
  41. </html>   
 
接下来第三步：
第三步：建立find.php：
 
  1. <?php   
  2.   define('HOST',"localhost");   
  3.   define('USER',"root");   
  4.   define('PWD',"");   
  5.   define('DB','test');   
  6.  
  7.   $connect = mysql_connect(HOST,USER,PWD) or die("数据库连接失败！");   
  8.   mysql_select_db(DB) or die("选择数据库失败");   
  9.  
  10.   $term=$_POST['search_term'];   
  11.   //$term="Bill";   
  12.  
  13.   $sql = "select name,phone from directory where name like '%".$term."%' order by name asc";   
  14.  
  15.   //echo $sql;   
  16.  
  17.   $result = mysql_query($sql);   
  18.  
  19.   $string = "";   
  20.  
  21.   if(mysql_num_rows($result)>0){   
  22.     while ($row = mysql_fetch_array($result)){   
  23.       $string .="<b>".$row['name']."</b>-";   
  24.       $string .="<b>".$row['phone']."</b>";   
  25.       $string .="<br/>\n";   
  26.     }   
  27.   }else{   
  28.     $string = "No matches";   
  29.   }   
  30.  
  31.   echo $string;   
  32.      

 
把上述的代码放到你的服务其上边运行就可以了 吼吼 简单吧！！！
    
 


再上一节中的$.post()方法是对底层ajax的一个快速封装，那么下边让我们看一看用底层的$.ajax()方法怎么实现上述的功能，简而言之，就是再在js中添加一个函数，代码如下：

  1. function ajax(){  
  2. $("#search_results").show();  
  3. var search_value=$("#search_input").val();  
  4. $.ajax({  
  5. type:"post",  
  6. url:"./find.php",  
  7. data:{'search':search_value},  
  8. success:function(data){  
  9. if(data.length>0){  
  10. $("#search_results").html(data);  
  11. }  
  12. }  
  13. }) 
接下来然后把上边的那个ajax_search()函数全部替换掉再试试，是不是跟原来的结果一样啊！！！