不知道看到这个标题的大家会觉得这里的json是指什么,貌似是一个人的名字,但是这里加上使用就肯定不是指某个人啦。?

我也稍微地说一下json,JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。不知道大家有没有接触过或者用过xml来传输数据,而json的作用与xml是一样的,作为数据传送的一种格式,后起之秀。Paperen我是先用上了json的,当初是在一本叫《PHP.5.高级应用开发实践》的书中看到过json的使用,而xml自己目前还没有在实际中用过。?

对于json大家可以访问一下站点:

http://baike.baidu.com/view/136475.htm

http://www.json.org/json-zh.html?

而今天一位同事(到了别的单位当php程序员了,以前是写Css与网页设计的),可能对这方面的东西了解不太多,他给我发了个压缩包让我帮帮他,我看了看,是一个买车方面的网站,大概是在举行一个什么活动吧,右边是一个注册框,左边是一个显示已经注册的那些人的信息,应该好办吧?如果这个页是php的话,但是我看了看发现这个页时html的,或者大家会问这代表什么?那代表这个页面是个死的,不能变通的,它本身不能随着数据库数据的添加而产生相应的变化。那么如果要实现这个功能该怎样做呢?

当Paperen我了解到这个后,我脑中浮现的解决方案是ajax+jquery+json,显然对于html我们可以使用js操作页面某些元素的增加与减少,这就是唯一能使html页面变通的办法了,而这些数据来自哪里呢?很明显是来自数据库,那怎来自数据库呢?不是说html是死的吗?所以我们要使用Ajax这个技术,Ajax又是什么……算了,我Paperen这篇的文章并不是写给对ajax一无所知的人看的(请原谅Paperen我吧…如果这样解析下去,我恐怕写不完了…),那么对于数据的封装我们就可以用上json了!


下面Paperen先写个很简陋的html页面,好让对这个功能不太了解的人有个形象的认识。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>json+ajax</title>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/car.js"></script>
</head>
<body onload="read_data()">
<ul id="member_list">
</ul>
<span id="reg_tip"></span>
<p>Name:<input type="text" id="name" /></p>
<p>Phone:<input type="text" id="phone" /></p>
<p>Email:<input type="text" id="email" /></p>
<p><input type="button" id="reg_btn" value="Submit" onclick="reg()" /></p>
</body>
</html>

这里稍微注意一下,在中引入js文件时要注意引入的顺序,先是要引入jquery.min.js,jquery的框架(这是必须的),还有引入一个是我们自定义的js文件,用来放我们自定义的一些js函数。如果引入顺序颠倒了,会导致我们写的js函数中的某些功能不能正常工作的。
给body引入一个onload事件,就是浏览器第一次加载这个页面时会触发read_data()这个函数,member_list是用来显示数据的,记得id名字在一个页面中是唯一。我这里随便弄了三个text框,id分别是name,phone,email,还有一个按钮叫reg_btn给它一个onclick事件,就是点击后触发后面的一个叫reg()函数。
同时我们要把需要的文件都建立好,还有路径确定好,Paperen我是这样分配的,根目录中放着两个文件,一个是这个index.html页面,一个是叫paperen.php的文件,名字根据个人需求起吧,还有三个文件夹分别是js(用来放js文件),data(之后用来放数据文件的),class(放一个来用处理mysql连接的类),因为这是一个例子所以文件就这么多就可以了,可能实际操作中会需要更多文件来实现整站的功能,下面我们来写写js动作吧,实现第一个功能就是用户注册功能。

?function reg(){
?//在这里进行一下判断,非空之类的
?var name=$("#name").val();
?var phone=$("#phone").val();
?var car=$("#car").val();
?$.post("paperen.php",{Action:"post",act:'reg',name:name,phone:phone,email:email},function(data){
??//alert(data);???????????????????if(data==1){
???//注册成功
???$("#reg_tip").html("注册成功");
???//重新刷新页面
???setTimeout("window.location.reload();",1500);
??}else{
???//注册失败
???$("#reg_tip").html("注册失败,请重试");
??}
?});
?}

这就是实现注册功能的一个js函数,我使用了JQuery来调用ajax,而不是使用传统js的方法来调用ajax,大家可以对比一下jquery来调用ajax与传统那种方法,看看哪个更简洁一些。将html页中的数据以post的方式传送到一个叫paoeren的php文件处理,而对于paperen文件中怎样进行编码我这里就不多说了,就是要组合一条sql语句然后送入数据库执行,ok则返回1,不ok则返回0到我们浏览器端的js函数进行判断注册成功与否,然后根据这个data值分别执行不同的操作,这就是ajax技术的强大之处。(如果要调试的话,可以使用alert对data进行一下调试,看看从php文件送回来的数据是不是正确)不过还应当注意一下在paperen页中编码问题,例如要用header定义一下页面的编码是很要必要的,另外要使用iconv函数对传送过来的数据进行编码转换,不然很可能会使中文数据产生乱码的现象。对于ajax传值时的编码问题可以看看Paperen以前写的那篇 Ajax实现网页聊天 ,这里就不多说了。(这里我只想说说html页与js的编写方面还有json的运用,php那边就轻轻地说而已。)


这就是实现了注册的功能,但还有一个功能就是显示注册的信息,我们需要读出数据,原理与注册功能是一样的,同样是使用ajax,但是还需要json对数据进行封装有利于它的传送,而我这里还进行了一个处理,就是将数据放到data文件夹一个文件中(比如是data.txt吧),为什么还要将数据放到一个文件中呢?可能有人会问这个问题,嗯,paperen我在做到那一步的时候也这么考虑过,用直接将数据从php那个页面传过来不就行了,还要弄个文件放数据?是不是有点多余啊?而我是这样想的,因为如果你不建立这个data文件的话会增加数据库的负担,因为我们每次访问这个html页就会触发去查一下数据库的数据然后再将数据传送过来。可以举个例子来对比一下。


如果有10个人访问这个页面,其中4个人进行注册,那么如果不建立这个data文件的话,需要与数据交互18次(10次来自第一次加载页面,4次是因为要往数据库写入注册信息,还有4次是当注册成功后页面重新加载时产生的),如果建立这个data文件的话,只需要与数据库交互4次。可见优势在哪里了,但当然这样做也有自身的不足。
对于对数据进行json编码也很简单,不过对于php版本大于5.2.0才会支持这个函数,paperen我这个空间上的php就没有json_encode这个函数不过还是有弥补的方法的,下面是一个json_encode函数。

http://rikugun.javaeye.com/blog/242577?

好像还有关于json的专门一个class文件,paperen我暂时没找到资源,所以目前我也只是将json函数引入到站点的函数库文件中去解决这个问题的。使用这个函数时直接json_encode($array)就ok啦。

再说一下read_data()这个函数吧,当页面加载的时候就会执行该js函数与paperen.php进行交互,并从data/data.txt中读取数据显示到页面上。

function read_data(){
$.post("paperen.php",{Action:"post",act:"read"},function(data){
//alert(data);//这里进行调试之用,弹出从read文件传来的数据
if(data){
var result=eval('('+data+')');
var info="";
for(i=0;i {
info+="
<li>name:"+result[i].name+" phone:"+result[i].phone+" car:"+result[i].email+"</li>";
}
$("#show_info").html(info);
}
else{
$("#show_info").html("读取失败");
}
});
}
其实这个read_data与reg其实都差不多,而它的重点在于要对json封装的数据进行解封的操作并组合成我们要求的html结构再输出到页面上,而这一句就是获取json的数据的关键
info+="<li>name:"+result[i].name+" phone:"+result[i].phone+" car:"+result[i].email+"</li>";

?而对于paperen.php文件中获取数据这个操作,其实就是一个读取文件并获取数据的操作,fopen,fread这两个函数就可以派上场了,如果大家考过三级计算机等级考试或者学过c语言的话对这两个函数都应该有点印象,上机题目中都是用这几个函数去处理文件中的数据的。


而最后paperen又想了想是不是可以将json封装的数据直接写到一个js文件里面放到一个变量中然后在页面加载的时候引入这个js文件不就可以了还省去了与paperen文件交互的一环,确实这个方法比我这样做更好,而我同事给我的那个站点文件中就是用了这个方法来处理的,其实已经有一个不错的思路,但也得能了解才能去写代码,如果连json都不太清楚的话,碰到这种数据形式真的不知道怎下手的。而paperen我还是觉得实现一个功能确实有很多种途径,但若要寻求一种最优的方法的话,确实需要下不少功夫,至少你要了解很多东西,想到这里paperen我又想起了我们副院长说的那句话“任何技术上的问题都不会是问题,只要给你足够的时间与支持。”,paperen我越来越觉得这是个真理了。

最后最后还发表一下感慨吧――发表一篇文章真不容易啊!这篇文章都写了三天了……本来昨晚就可以发表出来的了,却加班到晚上八点……回到宿舍都8点半了……