实战AJAX-------简单实例解析

前言：在学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处理页面代码讲解：

先贴出代码：

<?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://download.csdn.net/detail/harvic880925/5196064

转载请大家标明转载地址：http://www.jb51.cc/article/p-toethyvb-bae.html

实战AJAX-------简单实例解析

相关文章