在 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 这一组合有了什么新的体会,我也会在这里和大家分享的。



发表评论

电子邮件地址不会被公开。 必填项已用*标注

+ 2 = 11