在 CodeIgniter 中使用 jQuery 实现 AJAX

猪肉烧卖

在使用codeigniter前，我已经接触过一段时间的jquery了。Jquery高效的开发速度，良好的封装和简洁而灵活的语法都给我留下了很深刻的印象。 而它的ajax类让开发ajax成为了一种乐趣。你可以ajax类轻易的POST或者GET request。 它能帮助用户完成codeigniter不能完成的功能。 我才刚开始接触ci时间不长，ci轻巧而高效的框架同样给我留下了很深的印象。CI 的MVC 分离也做的非常的好，令人眼前一亮。但不可否认，ci也有它存在的问题。那就是对新技术的支持不够。类似json， ajax这些我们在网络开发中已经十分普及的技术，它都没有完成支持。 前些时间，由于自己想写一个php的项目，前段时间我调查了一下， 似乎大多数人都在使用xajax和其它封装好的php类。对此，我不是很喜欢，因为我一直认为框架会降低程序的执行效率。 所以我尝试着在ci框架中直接使用js框架jquery。 前天经过反复的试验，我找到了一个我自认为满意的方法， 并且发现在ci中实现ajax远比自己想像的简单。而且也没有像我自己想像的那样，破坏了MVC的完整性。

下面我把我的代码贴出来，和大家分享一下。

控制器：

PHP复制代码

function getPhoto()
{
          //query the picture from model
         $query = $this->photomodel->getPic($_POST['picID']);
                       
          if($query->num_rows() > 0)
          {
                     $row = $query->row();
                     $output = "<div class='winBar'><ul><li>_</li><li>x</li></ul></div><div class='winContent'><div id='photo_title'>" . $row->photoName . "</div><div id='photo_item'>" . $row->photoLink . "</div><div id='photo_comment'>" . $row->comment . "</div></div>";
           }
           else
                  $output = "no picture was found";
          echo($output);  
 }

复制代码

视图：

JS复制代码

$(".photoblock").click(function(){
                  $("#photoboard").fadeOut("slow");
                  $(this).css("background-color","#7c2916");
                  $("#loading_message").show();
                                               
                  //post the pictureID to controller and return the picture and embed it to the photoboard.
                   $.ajax({
                               type:"post",
                              data: "picID=" + $(this).attr("id"),
                              url:"<?=base_url()?>photogallery/getPhoto",
                               success: function(result)
                               {
                                          $("#photoboard").fadeTo("slow", 0.85).fadeIn("normal").html(result);
 
                                          $("#loading_message").hide();
                                },
                                                           
                               error: function()
                               {
                                          $("#loading_message").hide();
                                                                        alert("ajax error");
                               }
             });
                                               
});

复制代码

这是我写的 photo gallery 的部分代码。目的是在 php 页面中通过点击网页中图片的缩略图，来打开对应的图片进行浏览。
Code 很简单，我也不多解释了。大家需要注意的只是在用 jq post 或者 get 的时候， url 路径一定要用 base_url() 或者 site_url()。
在今后的日子里，如果我对 ci＋jq 这一组合有了什么新的体会，我也会在这里和大家分享的。

Hex

好文章！加分！

sam

好东西，学习了。。:)

beautylove

没看懂,,    刚开始学,   支持下

Hex

哪里有问题，欢迎提出来！

kkito

我也不喜欢服务器端封装js的方法。
呵呵
而且我也不大喜欢从服务器端直接generate出html的方法
我感觉parse成json或者xml比较好
要不然和html代码的耦合比较大，如果加了一些全局的css可能会破坏想要展现的html，到后来还是要改
其实rails里面除了正常render html外还有render json 和render xml的输出
我还是比较喜欢这种思路

研究下ci parse 到json有没有好的practice

Hex

楼上的想法和我不谋而合，我也是这样的想法。

kkito

中午吃饭的时候搜索了一下json的
http://codeigniter.com/forums/viewthread/45891/#355995

php5.2 之后自带json_encode，或者使用PEAR库
上面链接最后提到一个JSON.php Services_JSON ，但只支持ascii or utf8
虽然是bsd license但我不知道怎么改成支持gb
http://www.jimmydong.com/blog/post/1/74
修改后可以支持gb2312

[ 本帖最后由 kkito 于 2008-3-11 14:52 编辑 ]

Hex

晕了，早知道用这个写 JSON 了，呵呵～

gwpxjb

虽然不用jquery，但还是顶一个~