jQuery/Ajax/JSON/PHP操作实例代码

Jquery对ajax进行了强大的包装，使用Jquery中的ajax方法，让我们可以不用管浏览器的兼容性而只专注与代码的开发。Jquery实在太强大了，越研究她就越会被她的魅力所吸引。嘿嘿~~今天来给大家演示一个，服务端PHP读取MYSQL数据，并转换成JSON数据，传递给前端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看完了吧？那么接下来看教程吧！

1

 

4

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

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 等待你选择首字母 

08   

09 "); 

10             return false; 

11         } 

12         $server_select.empty().append(" 

13 请稍等...正在加载数据 

14   

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 不好意思，没有找到数据 

23   

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 "+entry.name+" 

30   

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

32                 }); 

33             } 

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

35         }) 

36     }) 

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

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 }
最后附上用到的表信息

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