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]