最近自己用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();

因为有注释，所以就不多讲了哈。本人只是小白，这些是仅供新手参考。因为逻辑比较简单，并且只是为了讲述小技巧，所以代码细节方面没做好，见谅。