thinkphp+ajax無刷新分頁並加載顯示圖片

    最近本身用thinkphp和bootstrap作一個小站點，在用到ajax與後臺數據庫交互實現無刷新分頁時，由於我須要返回的數據是html代碼，裏面包含要顯示出圖片，然而返回數據到靜態頁面時，卻發現返回的圖片未被網頁加載顯示。找了一些資料，最後提取總結了別人一些經驗，寫了一個小技巧。這裏純屬新手自學的總結，大牛們見怪莫怪。若是個人分享有不妥處，還望各位不吝賜教。

    先說下主要操做的思路：當靜態頁面的ajax提交後到後臺進行數據查詢和處理後，返回相似如下的html字符串

<img src='' width='250px' hieght='100px' alt='image' data-url='/wamp/www/schoolbag/Public/img/s2.jpg'>

    把這個用jquery的html方法插入的頁面中是沒法加載顯示圖片的。

    你們應該注意到上面的img標籤中的data-url，平時沒有實際的意義，可是這裏能夠做爲一個技巧來用，當ajax返回數據成功後，便可以執行以下操做

$('#ajax_content').html(data['html']);
var img_url = $('#ajax_content img').attr('data-url');
$('#ajax_content img').attr('src',img_url);

第一行代碼是將字符串放到靜態頁面上;第二行是把img標籤中的data-url裏的字符串（這裏是圖片地址）賦值給img_url;  第三行則是把img的src屬性替換爲img_url裏的值。這樣就能夠實現圖片的加載顯示了。 

    大致的思路是這樣，裏面還有處理翻頁按鈕的隱藏和顯示，不過本身以爲處理得不夠好。剛開始用thinkphp分頁時是使用默認的風格，後來想用本身的樣式，通過一番觀察發現裏面的翻頁也就是get方式提交翻頁的頁碼，因此能夠在前端靜態頁面上的分頁按鈕上修改一些連接，使其符合thinkphp分類的方法，後臺的數據處理按照手冊上來就行。下面是詳細的代碼。

    首先是靜態代碼：

<div class="container">
      <!--
      <div class="row">
      	<div class="span2 muted"><h4>最新動態</h4></div>
     		<div class="input-append span2 offset7 ">
    		  <input id="appendedInputButtons" type="text">
    		  <button class="btn" type="button">搜索</button>
    		</div>
  	  </div>
  	  -->
  	  <h4 class="muted">最新動態</h4>
      <div class="hr"><hr /></div>
      <ul class="thumbnails" id="ajax_content">
  		  <volist name="info_list" id="vo">
    		<li class="span2">
          <div class="thumbnail">  
            <a href="{$vo.url}"> 	    
            <img src="__PUBLIC__/img/s2.jpg" alt="" width="250px" hieght="100px">
            </a>
            <div class="caption"  id="lcontent">
              <h3>{$vo.headline}</h3>
        	    <p>{$vo.summary}</p>
              <p class="muted">{$vo.publishTime}</p>
      	    </div>
            
      	  </div>
    		</li> 
        </volist>
	    </ul>
    </div>
    <!--Thumbnails-end-->
    <!--paging-begin-->
    <div class="row-fluid paging">
      <li class="pull-left" id="pre_page">
        <!--<button class="btn btn-small" type="button" href="__ACTION__/p/{$pre_num}.html">< 上一頁</button>--> 
        <a href="__ACTION__/p/{$pre_num}.html" class="btn">< 上一頁</a>           
      </li>
      <li class="text-center active">
        {$c_num}/{$page_num}
      </li>
      <li class="pull-right" id="next_page">                       
        <!--<button class="btn btn-small" type="button" href="__ACTION__/p/{$next_num}.html">下一頁 ></button>-->
        <a href="__ACTION__/p/{$next_num}.html" class="btn">下一頁 ></a>
      </li>
    </div>
    <!--paging-end-->

（由於這是利用bootstrap，因此用上面代碼以前要先加載bootstrap，具體能夠在官網http://bootstrap.ninghao.net/index.html學習，或者本身查些資料教程看看，用起來挺方便的。）

    接下來是jquery的ajax提交：

<script>
    //首次加載頁面時的操做，主要爲了隱藏或顯示翻頁按鈕
      $(document).ready(function (){
        {$adInpre_script}
        {$adInext_script}
      });
      $(function(){ 
        //觸發ajax提交
        $('.paging a').click(
          function(){ 
            $.ajax({
              type: "GET",
              url:$(this).attr('href'),//取得a標籤連接地址
              //返回數據前的操做
              beforeSend:function(){
              var loading = "<div class='progress progress-striped active'><div class='bar' style='width: 40%;'></div></div>";
                $("#ajax_content").html(loading);
              },
              //成功返回數據後的操做
              success:function(data){ 
                $('#ajax_content').html(data['html']);
                var img_url = $('#ajax_content img').attr('data-url');
                $('#ajax_content img').attr('src',img_url);
                $('.paging li:eq(2) a').attr('href',data['n']);//寫入下一頁按鈕的連接
                $('.paging li:eq(0) a').attr('href',data['p']);//寫入上一頁按鈕的連接
                $(".paging li:eq(1)").text(data['c']);//寫入當前頁碼和總頁碼
                //下面的操做是決定上一頁和下一頁按鈕隱藏或顯示
                $(".paging li:eq(0)").removeClass("display");
                $(".paging li:eq(2)").removeClass("display");
                $(".paging li:eq(0)").addClass(data['pre_li']);
                $(".paging li:eq(2)").addClass(data['next_li']);
              }
            });
            return false;//使a標籤失效
          }) 
      })
    </script>

    而後是後臺的數據處理：

$num=5;//每頁的記錄數
      	$arr = array();//ajax返回的數組
	  	$info = M('Msg');
	  	$get_p = (empty($_GET['p']))?1:$_GET['p'];	      
		$info_list = $info->order('id desc')->page($get_p,$num)->select();
		for ($i=0;$i<count($info_list,COUNT_NORMAL);$i++) {
		  $info_list[$i]['publishTime']=date("Y-m-d H:i",$info_list[$i]['publishTime']);
		}
		for ($j=0;$j<$num;$j++) {      //ajax返回的一部份內容
			if (isset($info_list[$j]['id'])) {
			$arr['html'] = $arr['html']."<li class='span2'>
	          <div class='thumbnail'>
	      	    <a href='{$info_list[$j][url]}'>
	              <img src='' width='250px' hieght='100px' alt='image' data-url='/wamp/www/schoolbag/Public/img/s2.jpg'>
	            </a>
	            <div class='caption'>
	              <h3>{$info_list[$j][headline]}</h3>
	        	    <p>{$info_list[$j][summary]}</p>
	              <p class='muted'>{$info_list[$j][publishTime]}</p>
	      	    </div>
	      	  </div>
	    		</li> ";
    		}
		}				
	  	$this->assign('info_list',$info_list);//第一次打開網頁時輸出數據
	  	import("ORG.Util.Page");// 導入分頁類
	  	$count = $info->count();// 查詢知足要求的總記錄數
	  	$Page = new Page($count,$num);// 實例化分頁類 傳入總記錄數和每頁顯示的記錄數
	  	$page_num=ceil($count/$num);//頁碼總數
	  	if (!empty($_GET['p'])) {   //這裏表明有ajax提交
			$c_num = $_GET['p'];//當前頁碼
	    	if ($_GET['p']>=$page_num||$page_num==1) {//隱藏下一頁按鈕
		  		$arr['next_li'] = "display";
	    	}
	    	//隱藏pre按鈕
	    	if ($_GET['p']<=1) {  //隱藏上一頁按鈕
		  		$arr['pre_li'] = "display";
	    	}
	    	$arr['c'] = "{$_GET['p']}"."/".$page_num;//ajax返回當前頁碼/總頁碼		  
			$p = $_GET['p']-1;
			$n = $_GET['p']+1;
			$arr['n'] = '/wamp/www/schoolbag/index.php/Index/index/p/'.$n.'.html';//下一頁按鈕連接地址
			$arr['p'] = '/wamp/www/schoolbag/index.php/Index/index/p/'.$p.'.html';//上一頁按鈕連接地址
	    	$this->ajaxReturn($arr);//ajax返回數據
	  	}else {
			$c_num = 1;
	  	}
	  	$pre_num = $c_num-1;//上一頁頁碼
	  	$next_num = $c_num+1;//下一頁頁碼
	  	//隱藏下一頁按鈕
	  	$adInpre_script='$(".paging li:eq(2)").addClass("display");';
	  	if ($c_num>=$page_num||$page_num==1) {
			$this->assign('adInpre_script',$adInpre_script);
	  	}
	  	//隱藏上一頁按鈕
	  	$adInext_script='$(".paging li:eq(0)").addClass("display");';
	  	if ($c_num<=1) {
			$this->assign('adInext_script',$adInext_script);
	  	}
	  	$this->assign('page_num',$page_num);//輸出總頁碼
	  	$this->assign('c_num',$c_num);//輸出當前頁碼
	  	$this->assign('pre_num',$pre_num);//輸出上一頁頁碼
	  	$this->assign('next_num',$next_num);//輸出下一頁頁碼
      	$this->display();

    由於有註釋，因此就很少講了哈。本人只是小白，這些是僅供新手參考。由於邏輯比較簡單，而且只是爲了講述小技巧，因此代碼細節方面沒作好，見諒。