最近自己用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(); 因为有注释，所以就不多讲了哈。本人只是小白，这些是仅供新手参考。因为逻辑比较简单，并且只是为了讲述小技巧，所以代码细节方面没做好，见谅。
来源：oschina
链接：https://my.oschina.net/u/1446867/blog/208773