2019獨角獸企業重金招聘Python工程師標準>>>
????最近自己用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();
????因為有注釋，所以就不多講了哈。本人只是小白，這些是僅供新手參考。因為邏輯比較簡單，并且只是為了講述小技巧，所以代碼細節方面沒做好，見諒。
轉載于:https://my.oschina.net/u/1446867/blog/208773
總結
以上是生活随笔為你收集整理的thinkphp+ajax无刷新分页并加载显示图片的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
