用户
 找回密码
 入住 CI 中国社区
搜索
查看: 37217|回复: 36
收起左侧

[其它 Other] 在 CodeIgniter 中使用 jQuery 实现 AJAX

[复制链接]
发表于 2008-1-24 23:43:37 | 显示全部楼层 |阅读模式
在使用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 这一组合有了什么新的体会,我也会在这里和大家分享的。

评分

参与人数 1威望 +5 收起 理由
Hex + 5 精品文章

查看全部评分

发表于 2008-1-25 09:43:38 | 显示全部楼层
好文章!加分!
发表于 2008-2-22 16:31:19 | 显示全部楼层
好东西,学习了。。:)
发表于 2008-3-7 23:12:12 | 显示全部楼层
没看懂,,    刚开始学,   支持下
发表于 2008-3-10 18:11:20 | 显示全部楼层
哪里有问题,欢迎提出来!
发表于 2008-3-11 11:14:41 | 显示全部楼层

回复 楼主 的帖子

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

研究下ci parse 到json有没有好的practice
发表于 2008-3-11 13:24:06 | 显示全部楼层
楼上的想法和我不谋而合,我也是这样的想法。
发表于 2008-3-11 14:37:39 | 显示全部楼层

回复 6楼 的帖子

中午吃饭的时候搜索了一下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 编辑 ]
发表于 2008-3-11 15:25:16 | 显示全部楼层
晕了,早知道用这个写 JSON 了,呵呵~
发表于 2008-4-24 15:55:52 | 显示全部楼层
虽然不用jquery,但还是顶一个~

本版积分规则