thinkphp+ajax无刷新分页并加载显示图片

时间 2019-11-13

标签 thinkphp+ajax thinkphp ajax 刷新分页加载显示图片栏目 PHP 繁體版

原文原文链接

最近本身用thinkphp和bootstrap作一个小站点，在用到ajax与后台数据库交互实现无刷新分页时，由于我须要返回的数据是html代码，里面包含要显示出图片，然而返回数据到静态页面时，却发现返回的图片未被网页加载显示。找了一些资料，最后提取总结了别人一些经验，写了一个小技巧。这里纯属新手自学的总结，大牛们见怪莫怪。若是个人分享有不妥处，还望各位不吝赐教。
php

先说下主要操做的思路：当静态页面的ajax提交后到后台进行数据查询和处理后，返回相似如下的html字符串
html

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

把这个用jquery的html方法插入的页面中是没法加载显示图片的。前端

你们应该注意到上面的img标签中的data-url，平时没有实际的意义，可是这里能够做为一个技巧来用，当ajax返回数据成功后，便可以执行以下操做
jquery

$('#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里的值。这样就能够实现图片的加载显示了。 ajax

大致的思路是这样，里面还有处理翻页按钮的隐藏和显示，不过本身以为处理得不够好。刚开始用thinkphp分页时是使用默认的风格，后来想用本身的样式，通过一番观察发现里面的翻页也就是get方式提交翻页的页码，因此能够在前端静态页面上的分页按钮上修改一些连接，使其符合thinkphp分类的方法，后台的数据处理按照手册上来就行。下面是详细的代码。
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学习，或者本身查些资料教程看看，用起来挺方便的。）bootstrap

接下来是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>

而后是后台的数据处理：
app

$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();

由于有注释，因此就很少讲了哈。本人只是小白，这些是仅供新手参考。由于逻辑比较简单，而且只是为了讲述小技巧，因此代码细节方面没作好，见谅。