前言:在学JQUERY的时候,当时总感觉AJAX很难,也不会用,也不知道用来干嘛的,随着逐渐的深入,水平的不断提高,再回过头来看AJAX,就没那么难了,反而被它强大的功能所吸引。我现在的理解是,以往的页面如果在实现与数据库,并且将数据库的内容显示出来,只有刷新当前页面,除非使用你已经写好的JS脚本了,不仅造成页面刷新时重复请求服务器的带宽损失,而且对用户也不友好,并且对于程序员来说,为了提高用户体验,就不得不在刷新前保存各种数据,以免刷新完了之后,用户数据丢失,所以如何在请求数据库时,不用刷新当前页面,就像当时已经写好的JS页面一样,随时响应,这时AJAX就应运而生了,而AJAX对于提升用户体验真得是起到了突破性的进展,向开发AJAX的同志们表示深深的敬意。
本篇内容:我们从一个简单的实例出发,来了解jquery的AJAX的具体使用方法,最后我将给出源代码,供大家分享交流。
将要实现功能:
先发个图:(界面比较丑,大家只关注效果好了^_^)
这里有两个标签,ID值分别是click1,click2;当点击任何一个标签时,触发它的AJAX,将它的ID值与背景值传给PHP页面去处理,PHP页面在接收到这些值后,在数据库里为它新建一行,并找到所插入行的ID号,作为JSON返回值的一部分。
数据库部分:
一、首先我这里本地服务器,用户名为:root 密码为:admin,如果不一样,请到页面里去改成自己的,这个应该不用再讲了。
二、新建一个数据库,命名为tryDB,编码格式为:utf8_general_ci
三、新建一个表,建表命令如下:
CREATE TABLE `try`( `id` int(11) NOT NULL auto_increment,`class_id` varchar(25),`background` varchar(100),PRIMARY KEY (`id`) );
下面是代码讲解:
首先是显示的PHP页面的代码,这个页面我命名为:tryAJAX.PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="jquery.js" type="text/javascript"></script> <style type="text/css"> #click1,#click2{ width:100px; } div{ width:500px; } </style> <script type="text/javascript"> <!-- $(function(){ $("#click1,#click2").click(function(){ $.ajax({ url: "ajax_PHP.PHP",type: "POST",data:"id="+$(this).attr('id')+"&bg="+$(this).get(0).style.background,success: function(json,status){//如果调用PHP成功 var tempNode="<div style='background:"+json.bg+";'>生成此HTML的标签ID为"+json.class_id; tempNode+=",新生成的数据库的ID值为"+json.sqlId+"</div>"; $("body").append(tempNode); } }); }) }); //--> </script> </head> <body> <h3>点击下面标签访问DB,并插入数据并返回</h3> <div id="click1" style="background: #fff000;">标签一</div> <br><br> <div id="click2" style="background:#000fff;">标签二</div> <br><br> </body> </html>
这段代码非常简单,我相信大家都可以看懂,只是这里有几个注意事项,我说下
1、调用ajax函数时,注意用的是$.ajax(),不是$(this)!
2、Ajax中的success部分讲解
这里我用的是json格式,对于JSON的格式,大家可以参考这个教程,非常简单,网址:http://www.w3school.com.cn/json/index.asp其实它就相当于JS里的对象差不多,相信大家一会就能学会了。
3、Ajax中的data部分讲解
传递给DATA值时,首先是使用字符串的形式传递的,并且要注意的是两个名称前要用&连接,如:”id=’23’&name=’node’”
先贴出代码:
<?PHP header('Content-type:text/json'); //这句是重点,它告诉接收数据的对象此页面输出的是json数据; $conn=MysqL_connect("localhost","root","admin") or die("数据库服务器连接错误".MysqL_error()); $class_id=$_POST['id']; $bg=$_POST['bg']; MysqL_select_db("tryDB",$conn); MysqL_query("insert try(class_id,background)values('$class_id','$bg')"); $sqlId=MysqL_insert_id();//获取刚才插入的ID值 //为了增加JSON使用效果,我们不仅将新生成的ID号返回,同时也将传过来的DIV 标签的$class_id值与$bg返回去; //当然,你在实际应用中,可以使用其它变量,我讲的只是使用json返回数值的方法 $json=json_encode(array('sqlId'=>$sqlId,'class_id'=>$class_id,'bg'=>$bg)); echo $json;
讲解:
1、 注意第一句:header('Content-type:text/json');如果你用的不是JSON,这句要变成对就的比如text/html啥的,想知道还有哪些类型,问度娘;
2、 再值得讲的就是倒数第二句了,注意要生成JSON对象,要使用json_encode函数,将要生成的序列,先生成一个ARRAY数组,然后由json_encode函数自已转化成JSON对象;
3、 注意PHP处理页面的返回方式,是用echo而不是用return!
转载请大家标明转载地址:http://www.jb51.cc/article/p-toethyvb-bae.html