Jquery/Ajax/JSON/PHP操作完全实例

网络整理 - 08-03

Jquery对进行了强大的包装，使用Jquery中的ajax方法，让我们可以不用管浏览器的兼容性而只专注与代码的开发。Jquery实在太强大了，越研究她就越会被她的魅力所吸引。嘿嘿~~今天来给大家演示一个，服务端PHP读取MYSQL数据，并转换成ON数据，传递给前端Javascript，并操作JSON数据。

本文将通过实例演示了jQuery通过Ajax向PHP服务端发送请求并返回JSON数据。阅读本文的读者应该具备jQuery、Ajax、PHP相关知识。
特别提示：这里PHP程序用的是CI（CodeIgniter）框架，另外 php中的json_encode方法，必需php版本在5.2以及以上才可以使用。

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成。JSON在前后台交互的过程中发挥着相当出色的作用。本人很讨厌XML的那种复杂的数据结构，呵呵~~其实自己也没对XML进行过很深的研究，只是觉得用js操作XML一点都没操作json来得方便。

还是老样子，先看DEMO

DEMO看完了吧？那么接下来看教程吧！

XHML
view sourceprint?
1 <DIV style="Z-INDEX: 10; POSITION: absolute; DISPLAY: none" id=ajax_image>

2 <IMG border=0 src=http://www.jzxue.com/wangzhankaifa/php/201107/"images/ajax-loading.gif">

3 </DIV>

4 <DIV id=box>

5 <H3>Jquery/Ajax/JSON/PHP操作完全实例</H3>

6 <SELECT id=letter> <OPTION selected value="">请选择首字母</OPTION> <OPTION value=A>A</OPTION> <OPTION value=B>B</OPTION> <OPTION value=C>C</OPTION> <OPTION value=D>D</OPTION> <OPTION value=E>E</OPTION> <OPTION value=F>F</OPTION> <OPTION value=G>G</OPTION> <OPTION value=H>H</OPTION> <OPTION value=I>I</OPTION> <OPTION value=J>J</OPTION> <OPTION value=K>K</OPTION> <OPTION value=L>L</OPTION> <OPTION value=M>M</OPTION> <OPTION value=N>N</OPTION> <OPTION value=X>X</OPTION></SELECT>

7 <SELECT id=server> <OPTION selected value="">等待你选择首字母</OPTION></SELECT>

8 </DIV>
实例中，我加两个下拉菜单分别给了两个不同的ID，第一个#letter(代表首字母的下拉菜单),第二个#server(代表魔兽服务器的下拉菜单),我想要的效果是当选择第一个下拉菜单的时候，第二个下拉菜单首先会变成“请稍等…正在加载数据”，还有同时会出现一个ajax-loading的图片，然后第二个下拉菜单会出来魔兽的服务器信息，是根据首字母来取得的。

JS代码
view sourceprint?
01 $(function(){

02 $('#letter').change(function(){

03 var $letter_select = $(this);//选择首字母下拉菜单的jquery对象

04 var $server_select = $('#server');//服务器的下拉菜单的jquery对象

05 if ($letter_select.val() == ""){//如果下单菜单选择了初始的“请选择首字母”的选项

06 $server_select.empty().append("

07 <OPTION value="">等待你选择首字母</OPTION>

09 ");

10 return false;

11 }

12 $server_select.empty().append("

13 <OPTION value="">请稍等...正在加载数据</OPTION>

15 ");//将server的下拉菜单清空并且加入一个“请稍等...正在加载数据”的项目

16 var $tips = $('#ajax_image');//这个是ajax图片的jquery对象

17 var $position = $letter_select.offset();//取得当前操作的位置

18 $tips.css("top",$position.top).css("left",$position.left).show();//将ajax-loading的图片移动到当前操作的位置，并且让这个图片显示出来

19 $.getJSON('jquery_ajax_json_php/search_server.html?letter=' + $letter_select.val(),function(json){

20 if(json.length == 0){//没有从数据库中找到数据

21 $server_select.empty().append("

22 <OPTION value="">不好意思，没有找到数据</OPTION>

24 ")

25 }else{//成功获取数据

26 $server_select.empty();//将server的下拉菜单清空

27 $.each(json,function(index,entry){//利用each方法，遍历json数组 index代表序号0,1,2... entry代表结果对象

28 $server_select.append("

29 <OPTION value='"+ entry.id +"'>"+entry.name+"</OPTION>

31 ");//将取得的数据逐条插入到server的下拉菜单中

32 });

33 }

34 $tips.hide();//隐藏ajax-loading图片

35 })

36 })

37 });
这里我给首字母的下拉菜单绑定了一个onchange的事件，ajax的方法是用的jquery的getJSON的方法。代码里面已经有了注视了，我就不多说了。

PHP代码
view sourceprint?
01 function search_server(){

02 //取得参数

03 $letter = $this->input->get('letter');

04 //查询数据

05 $server_list = $this->db->from('wow_server')->like('name',$letter,'after')->get();

06 $return_result = array();

07 if ($server_list->num_rows() > 0){

08 foreach($server_list->result() as $server_obj){//将取得的结果压成二维数组

09 $return_result[] = array(

10 'id' => $server_obj->id,

11 'name' => $server_obj->name

12 );

13 }

14 }

15 sleep(1);//让程序等待1秒，然后再返回数据

16 echo json_encode($return_result);

17 }
最后附上用到的表信息

view sourceprint?
1 CREATE TABLE `ci_wow_server` (

2 `id` int(11) NOT NULL AUTO_INCREMENT,

3 `name` varchar(64) NOT NULL DEFAULT '',

4 PRIMARY KEY (`id`),

5 KEY `idx_products_options_values_name_zen` (`name`)

6 ) ENGINE=MyISAM AUTO_INCREMENT