jquery中使用ajax的php实例

wlyyb521

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



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



第一步：在你的数据库中建立一个表，用来储存测试的信息：

• CREATE TABLE `directory` (   
  
• `id` INT NOT NULL AUTO_INCREMENT ,   
  
• `name` VARCHAR( 64 ) NOT NULL ,   
  
• `phone` VARCHAR( 16 ) NOT NULL ,   
  
• PRIMARY KEY ( `id` )      
  
• ) TYPE = MYISAM ;
  

我们建立一个directory表来储存测试信息，然后我们向其中出入几条测试数据：

• insert into `directory` (name,phone) values ('Tom Smith', '512-555-0111');      
  
• insert into `directory` (name,phone) values ('Bill Smith', '512-555-0112');      
  
• insert into `directory` (name,phone) values ('John Smith', '512-555-0113');      
  
• insert into `directory` (name,phone) values ('Jane Smith', '512-555-0114');      
  
• insert into `directory` (name,phone) values ('Sara Smith', '512-555-0115');
  

到现在为止第一步也就完成了，接下来我们来进行第二步；

第二步：建立index.php文件代码如下：

•    
  
•      
  
•     Welcome to Ajax!!   
  
•       
  
•       
  
•       $(document).ready(function(){   
  
•           $("#search_results").slideUp();   
  
•           $("#search_button").click(function(e){   
  
•             e.preventDefault();   
  
•             ajax_search();   
  
•             });   
  
•           $("#search_term").keyup(function(e){   
  
•             e.preventDefault();   
  
•             ajax_search();   
  
•             });   
  
•           });   
  
•       function ajax_search(){   
  
•         $("#search_results").show();   
  
•         var search_val=$("#search_term").val();   
  
•         $.post("./find.php",{search_term:search_val},function(data){   
  
•             if(data.length>0){   
  
•               $("#search_results").html(data);   
  
•             }   
  
•             }   
  
•         )   
  
•       }   
  
•               
  
•      
  
• 
  
•      
  
•      Search Our Phone Directory   
  
•       
  
•          
  
•         Search Name/Phone   
  
•            
  
•            
  
•          
  
•       
  
•       
  
•      
  
•    
  

接下来第三步：

第三步：建立find.php：