wlyyb521 发表于 2018-12-20 08:15:42

jquery中使用ajax的php实例

最近一直在学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:






[*]
页: [1]
查看完整版本: jquery中使用ajax的php实例