頁面上實現類似於下拉載入更多的功能，這種是點選載入更多 。

大致思路是：

• 首先Ajax獲取到下一頁內容，返回json格式資料，如果是跨域請求可以用jsonp返回，通過jq的append()到某個元素後面
• 此時分頁的page+1，可以在“載入更多”按鈕上把總頁數和當前頁用自定義屬性標識，如data-page=1，data-total=5
• 如果當前頁等於總頁數時將”載入更多”按鈕remove()掉

下面是jq和php程式碼： 

• html結構

<ul class="clearfix moreadd">
    <li><a href="#" title="0123">
        <img class="lazyimg" src="img/grey.gif">
        <div class="info">
            <p class="name">123</p>
            <p class="txt">456</p>
            <p class="tag clearfix"><i class="fl">2018年08月08日 09:34 </i><i class="fr">來源：白鯨出海</i></p>
        </div>
    </a></li>					
</ul>
<span class="more" data-total="5" data-page="1">載入更多</span>
 

• jQuery

<script type="text/javascript">
    $('.more').on('click',function(){
    var baseurl = $('#baseurl').val();
    var type  = $.trim($(this).attr('data-type'));
    var total = parseInt($(this).attr('data-total'));
    var page  = parseInt($(this).attr('data-page'));

    $.ajax({
        url: baseurl+'index.php',
        type: 'get',
        dataType: "jsonp",
        data: {type:type,page:page+1},
        success:function(res){
            $('.moreadd').append(res);
            $('.more').attr('data-page',page+1);
            if(page+1 == total){
                $('.more').remove();
            }
         }
    });
});
</script>
 

• php

  function ajaxNewsFunc(){
  	global $_NEWSTYPE,$DOMAIN;
  	$callback = $_GET['callback'];
  	$type    = trim($_GET['type']);
  	$page    = (int)$_GET['page'];
  	$topicid = (int)$_GET['topicid'];	//專題id
  
  	$pagesize = 20;
  	$limit = 'limit '.($pagesize*$page-$pagesize).','.$pagesize;
  
  	$where = $type ? "type in ($keys) and status = 1" : "status = 1";
  
  	$list  = mysqli_query();
  
  	$html = '';
  	if($list){
  		foreach ($list as $k => $val) {
  			$val['fromid'] = $val['fromid'] ? $val['fromid'] : '123';
  			$html .= '<li><a href="'.$DOMAIN['index'].$type.'/'.$val['id'].'.html" title="'.$val['title'].'">';
  			$html .= '<img class="lazyimg" src="'.$DOMAIN['lazyimg'].'" data-url="'.$DOMAIN['image'].$val['imgurl'].'" width="200" height="130">';
  			$html .= '<div class="info">';
  			$html .= '<p class="name">'.$val['title'].'</p>';
  			$html .= '<p class="txt">'.$val['descrip'].'</p>';
  			$html .= '<p class="tag clearfix"><i class="fl">'.date('Y-m-d H:s').'</i><i class="fr">來源：'.$val['fromid'].'</i></p>';
  			$html .= '</div>';
  			$html .= '</a></li>';
  		}
  	} 
  	$data['callback'] = $callback;
  	$data['data']     = $html;
  	echo $callback.'('.json_encode($html).')';
  }
   
  

  注：分頁資料可以用jq迴圈解析，此處是用php直接返回html程式碼(jsonp格式)