生活随笔
收集整理的這篇文章主要介紹了
thinkphp+ajax无刷新分页并加载显示图片
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
????最近自己用thinkphp和bootstrap做一個小站點(diǎn)，在用到ajax與后臺數(shù)據(jù)庫交互實(shí)現(xiàn)無刷新分頁時，因?yàn)槲倚枰祷氐臄?shù)據(jù)是html代碼，里面包含要顯示出圖片，然而返回數(shù)據(jù)到靜態(tài)頁面時，卻發(fā)現(xiàn)返回的圖片未被網(wǎng)頁加載顯示。找了一些資料，最后提取總結(jié)了別人一些經(jīng)驗(yàn)，寫了一個小技巧。這里純屬新手自學(xué)的總結(jié)，大牛們見怪莫怪。如果我的分享有不妥處，還望各位不吝賜教。
????先說下主要操作的思路：當(dāng)靜態(tài)頁面的ajax提交后到后臺進(jìn)行數(shù)據(jù)查詢和處理后，返回類似以下的html字符串
<img?src=''?width='250px'?hieght='100px'?alt='image'?data-url='/wamp/www/schoolbag/Public/img/s2.jpg'>
? ? 把這個用jquery的html方法插入的頁面中是無法加載顯示圖片的。
????大家應(yīng)該注意到上面的img標(biāo)簽中的data-url，平時沒有實(shí)際的意義，但是這里可以作為一個技巧來用，當(dāng)ajax返回數(shù)據(jù)成功后，即可以執(zhí)行如下操作
$('#ajax_content').html(data['html']);
var?img_url?=?$('#ajax_content?img').attr('data-url');
$('#ajax_content?img').attr('src',img_url);
第一行代碼是將字符串放到靜態(tài)頁面上;第二行是把img標(biāo)簽中的data-url里的字符串（這里是圖片地址）賦值給img_url;? 第三行則是把img的src屬性替換為img_url里的值。這樣就可以實(shí)現(xiàn)圖片的加載顯示了。?
????大體的思路是這樣，里面還有處理翻頁按鈕的隱藏和顯示，不過自己覺得處理得不夠好。剛開始用thinkphp分頁時是使用默認(rèn)的風(fēng)格，后來想用自己的樣式，經(jīng)過一番觀察發(fā)現(xiàn)里面的翻頁也就是get方式提交翻頁的頁碼，所以可以在前端靜態(tài)頁面上的分頁按鈕上修改一些鏈接，使其符合thinkphp分類的方法，后臺的數(shù)據(jù)處理按照手冊上來就行。下面是詳細(xì)的代碼。
????首先是靜態(tài)代碼：
<div?class="container"><!--<div?class="row"><div?class="span2?muted"><h4>最新動態(tài)</h4></div><div?class="input-append?span2?offset7?"><input?id="appendedInputButtons"?type="text"><button?class="btn"?type="button">搜索</button></div></div>--><h4?class="muted">最新動態(tài)</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-->
（因?yàn)檫@是利用bootstrap，所以用上面代碼之前要先加載bootstrap，具體可以在官網(wǎng)http://bootstrap.ninghao.net/index.html學(xué)習(xí)，或者自己查些資料教程看看，用起來挺方便的。）
????接下來是jquery的ajax提交：
<script>//首次加載頁面時的操作，主要為了隱藏或顯示翻頁按鈕$(document).ready(function?(){{$adInpre_script}{$adInext_script}});$(function(){?//觸發(fā)ajax提交$('.paging?a').click(function(){?$.ajax({type:?"GET",url:$(this).attr('href'),//取得a標(biāo)簽鏈接地址//返回數(shù)據(jù)前的操作beforeSend:function(){var?loading?=?"<div?class='progress?progress-striped?active'><div?class='bar'?style='width:?40%;'></div></div>";$("#ajax_content").html(loading);},//成功返回數(shù)據(jù)后的操作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']);//寫入當(dāng)前頁碼和總頁碼//下面的操作是決定上一頁和下一頁按鈕隱藏或顯示$(".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標(biāo)簽失效})?})</script>
????然后是后臺的數(shù)據(jù)處理：
$num=5;//每頁的記錄數(shù)$arr?=?array();//ajax返回的數(shù)組$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返回的一部分內(nèi)容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);//第一次打開網(wǎng)頁時輸出數(shù)據(jù)import("ORG.Util.Page");//?導(dǎo)入分頁類$count?=?$info->count();//?查詢滿足要求的總記錄數(shù)$Page?=?new?Page($count,$num);//?實(shí)例化分頁類?傳入總記錄數(shù)和每頁顯示的記錄數(shù)$page_num=ceil($count/$num);//頁碼總數(shù)if?(!empty($_GET['p']))?{???//這里代表有ajax提交$c_num?=?$_GET['p'];//當(dāng)前頁碼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返回當(dāng)前頁碼/總頁碼 ??$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返回數(shù)據(jù)}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);//輸出當(dāng)前頁碼$this->assign('pre_num',$pre_num);//輸出上一頁頁碼$this->assign('next_num',$next_num);//輸出下一頁頁碼$this->display();
????因?yàn)橛凶⑨?#xff0c;所以就不多講了哈。本人只是小白，這些是僅供新手參考。因?yàn)檫壿嫳容^簡單，并且只是為了講述小技巧，所以代碼細(xì)節(jié)方面沒做好，見諒。
轉(zhuǎn)載于:https://my.oschina.net/u/1446867/blog/208773
總結(jié)
以上是生活随笔為你收集整理的thinkphp+ajax无刷新分页并加载显示图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
