最近一直在学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文件代码如下：
<html> <head> <title>Welcome to Ajax!!</title> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./jquery.js"></script> <script type="text/javascript"> $(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); } } ) } </script> </head> <body> <h1> Search Our Phone Directory <h1> <form id="searchform" method="post"> <div > <label for="search_term">Search Name/Phone</label> <input type="text" name="search_term" id="search_term"/> <input type="submit" value="search" id="search_button"/> </div> </form> <div id="search_results"></div> </body> </html>接下来第三步：第三步：建立find.php：
<?php define('HOST',"localhost"); define('USER',"root"); define('PWD',""); define('DB','test'); $connect = mysql_connect(HOST,USER,PWD) or die("数据库连接失败！"); mysql_select_db(DB) or die("选择数据库失败"); $term=$_POST['search_term']; //$term="Bill"; $sql = "select name,phone from directory where name like '%".$term."%' order by name asc"; //echo $sql; $result = mysql_query($sql); $string = ""; if(mysql_num_rows($result)>0){ while ($row = mysql_fetch_array($result)){ $string .="<b>".$row['name']."</b>-"; $string .="<b>".$row['phone']."</b>"; $string .="<br/>\n"; } }else{ $string = "No matches"; } echo $string;
把上述的代码放到你的服务其上边运行就可以了 吼吼 简单吧！！！
再上一节中的$.post()方法是对底层ajax的一个快速封装，那么下边让我们看一看用底层的$.ajax()方法怎么实现上述的功能，简而言之，就是再在js中添加一个函数，代码如下：
function ajax(){ $("#search_results").show(); var search_value=$("#search_input").val(); $.ajax({ type:"post", url:"./find.php", data:{'search':search_value}, success:function(data){ if(data.length>0){ $("#search_results").html(data); } } }) 接下来然后把上边的那个ajax_search()函数全部替换掉再试试，是不是跟原来的结果一样啊！！！
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦