discuz 3.2 首页ajax点击加载更多(最简版)

非diy，查询数据库获得数据，带分页，带加载更多按钮。
以文章列表为例：
数据查询部分

1. //首页文章主列表
   
2. $aids='56,63,68';//不调用的栏目，多个用半角逗号分开
   
3. $article_messagelength='500';//内容字数
   
4. $article_num=2;
   
5. $article_begin=($_G['page']-1)*$article_num;
   
6. $article_manylist=array();
   
7. require_once libfile('function/post');
   
8. $article_rs=DB::query("SELECT a.*,a.title as atitle,b.*,c.* FROM ".DB::table("portal_article_title")." a LEFT JOIN ".DB::table("portal_article_content")." b on b.aid=a.aid LEFT JOIN ".DB::table("portal_article_count")." c on c.aid=a.aid WHERE a.`aid` NOT in ($aids) and a.status=0 group by a.aid ORDER BY b.`dateline` DESC LIMIT $article_begin , $article_num");
   
9. while ($article_rw=DB::fetch($article_rs)) {
   
10.         $article_rw['content']=messagecutstr($article_rw['content'],$article_messagelength,'');
    
11.         $article_rw['content']=dhtmlspecialchars($article_rw['content']);
    
12.         $article_manylist[]=$article_rw;
    
13. }
    
14. $article_allnum=DB::result_first("select count(*) from ".DB::table("portal_article_title")." where aid NOT in ($aids) and `status`=0");
    
15. $article_pagenav=multi($article_allnum,$article_num,$_G['page'],"portal.php");
    
16. $article_ntpage=$_G['page']+1;
    
17. $article_fynum=ceil($article_allnum/$article_num);

复制代码

模板调用部分

1. <ul class="article-list tab-list active" id="article-list">
   
2. <!--{loop $article_manylist $value}-->
   
3. <li id="list_{$value['aid']}" class="item">
   
4. <div class="item-img">
   
5. <a href="portal.php?mod=view&aid={$value['aid']}" title="{$value['atitle']}" target="_blank">
   
6. <img src="data/attachment/{$value['pic']}" width="480" height="320" alt="{$value['atitle']}">
   
7. </a>
   
8. <a class="item-category" href="forum.php?mod=forumdisplay&fid={$value['aid']}" target="_blank">{$value['name']}</a>
   
9. </div>
   
10. <div class="item-content">
    
11. <h2 class="item-title"><a href="portal.php?mod=view&aid={$value['aid']}" title="{$value['atitle']}" target="_blank">{$value['atitle']}</a></h2>
    
12. <div class="item-excerpt">
    
13. <p>{$value['content']}</p>
    
14. </div>
    
15. <div class="item-meta">
    
16. <div class="item-meta-li author">
    
17. <a data-user="4" target="_blank" href="#" class="avatar">
    
18. <img src="uc_server/avatar.php?uid={$value['uid']}&size=small" width="30" height="30" alt="{$value['username']}"/>
    
19. </a>
    
20. <a class="nickname" href="#" target="_blank">{$value['username']}</a>
    
21. </div>
    
22. <span class="item-meta-li date">10分钟前</span>
    
23. <span class="item-meta-li views" title="阅读"><i class="fa fa-eye"></i> <span class="data">{$value['viewnum']}</span></span>
    
24. <span class="item-meta-li likes" title="分享"><i class="fa fa-thumbs-up"></i> <span class="data">{$value['sharetimes']}</span></span>
    
25. <a class="item-meta-li comments" href="#" target="_blank" title="评论"><i class="fa fa-comment"></i><span class="data">{$value['commentnum']}</span></a>
    
26. <span class="item-meta-li hearts" title="收藏"><i class="fa fa-heart"></i><span class="data">{$value['favtimes']}</span></span>
    
27. </div>
    
28. </div>
    
29. </li>
    
30. <!--{/loop}-->
    
31. </ul>
    
32. <div class="load-more-wrap">
    
33. <a class="load-more" href="javascript:;" rel="portal.php?&page={$article_ntpage}" curpage="{$_G['page']}" id="autopbn" totalpage="{$article_fynum}" picstyle="$_G[forum][picstyle]" forumdefstyle="$_G[cookie][forumdefstyle]">加载更多+</a>
    
34. <script type="text/javascript" src="{$_G[style][styleimgdir]}/js/indexloadpage.js?{VERHASH}"></script>
    
35. </div>
    
36. <div class="mt cl">
    
37. <div id="fd_page_bottom">{$article_pagenav}</div>
    
38. </div>

复制代码

indexloadpage.js部分

1. /*
   
2.         [Discuz!] ajaxlist
   
3. */
   
4. 
   
5. (function() {
   
6. 
   
7.         var autopbn = $('autopbn');
   
8.         var nextpageurl = autopbn.getAttribute('rel').valueOf();
   
9.         var curpage = parseInt(autopbn.getAttribute('curpage').valueOf());
   
10.         var totalpage = parseInt(autopbn.getAttribute('totalpage').valueOf());
    
11.         var picstyle = parseInt(autopbn.getAttribute('picstyle').valueOf());
    
12.         var forumdefstyle = parseInt(autopbn.getAttribute('forumdefstyle').valueOf());
    
13.         picstyle = picstyle && !forumdefstyle;
    
14.         var autopagenum = 0;
    
15.         var maxpage = (curpage + autopagenum) > totalpage ? totalpage : (curpage + autopagenum);
    
16. 
    
17.         var loadstatus = 0;
    
18. 
    
19.         autopbn.onclick = function() {
    
20.                 var oldloadstatus = loadstatus;
    
21.                 loadstatus = 2;
    
22.                 autopbn.innerHTML = '正在加载, 请稍后...';
    
23.                 getnextpagecontent();
    
24.                 loadstatus = oldloadstatus;
    
25.         };
    
26. 
    
27.         if(autopagenum > 0) {
    
28.                 window.onscroll = function () {
    
29.                         var curtop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    
30.                         if(curtop + document.documentElement.clientHeight + 500 >= document.documentElement.scrollHeight && !loadstatus) {
    
31.                                 loadstatus = 1;
    
32.                                 autopbn.innerHTML = '正在加载, 请稍后...';
    
33.                                 setTimeout(getnextpagecontent, 1000);
    
34.                         }
    
35.                 };
    
36.         }
    
37. 
    
38.         function getnextpagecontent() {
    
39. 
    
40.                 if(curpage + 1 > totalpage) {
    
41.                         window.onscroll = null;
    
42.                         autopbn.style.display = 'none';
    
43.                         return;
    
44.                 }
    
45.                 if(loadstatus != 2 && curpage + 1 > maxpage) {
    
46.                         autopbn.innerHTML = '下一页 &#65533;0&#65533;3';
    
47.                         if(curpage + 1 > maxpage) {
    
48.                                 window.onscroll = null;
    
49.                         }
    
50.                         return;
    
51.                 }
    
52.                 curpage++;
    
53.                 var url = nextpageurl + '&t=' + parseInt((+new Date()/1000)/(Math.random()*1000));
    
54.                 var x = new Ajax('HTML');
    
55.                 x.get(url, function (s) {
    
56.                         s = s.replace(/\n|\r/g, '');
    
57.                         if(s.indexOf("id="autopbn"") == -1) {
    
58.                                 $("autopbn").style.display = "none";
    
59.                                 window.onscroll = null;
    
60.                         }
    
61. 
    
62.                         if(!picstyle) {
    
63.                                 var tableobj = $('article-list');
    
64.                                 var nexts = s.match(/\<li id="list_(\d+)" class="item"\>(.+?)\<\/li>/g);
    
65.                                 for(i in nexts) {
    
66.                                         if(i == 'index' || i == 'lastIndex') {
    
67.                                                 continue;
    
68.                                         }
    
69.                                         var insertid = nexts[i].match(/<li id="list_(\d+)" class="item"\>/);
    
70.                                         if(!$('list_' + insertid[1])) {
    
71. 
    
72.                                                 var newbody = document.createElement('li');
    
73.                                                 tableobj.appendChild(newbody);
    
74.                                                 var div = document.createElement('ul');
    
75.                                                 div.innerHTML = '<ul>' + nexts[i] + '</ul>';
    
76.                                                 tableobj.replaceChild(div.childNodes[0].childNodes[0], tableobj.lastChild);
    
77.                                         }
    
78.                                 }
    
79.                         } else {
    
80.                                 var nexts = s.match(/\<li style="width:\d+px;" id="picstylethread_(\d+)"\>(.+?)\<\/li\>/g);
    
81.                                 for(i in nexts) {
    
82.                                         var insertid = nexts[i].match(/id="picstylethread_(\d+)"\>/);
    
83.                                         if(!$('picstylethread_' + insertid[1])) {
    
84.                                                 $('threadlist_picstyle').innerHTML += nexts[i];
    
85.                                         }
    
86.                                 }
    
87.                         }
    
88.                         var pageinfo = s.match(/\<div id="fd_page_bottom"\>(.+?)\<\/div\>/);
    
89.                         nextpageurl = nextpageurl.replace(/&page=\d+/, '&page=' + (curpage + 1));
    
90. 
    
91.                         $('fd_page_bottom').innerHTML = pageinfo[1];
    
92.                         if(curpage + 1 > totalpage) {
    
93.                                 autopbn.style.display = 'none';
    
94.                         } else {
    
95.                                 autopbn.innerHTML = '下一页 &#65533;0&#65533;3';
    
96.                         }
    
97.                         loadstatus = 0;
    
98.                 });
    
99.         }
    
100. 
     
101. })();

复制代码

说明：
数据查询说明
$article_num——每页数量；
$article_manylist——数组；
$article_allnum——文章总数；
$article_pagenav——分页代码，含html；
$article_ntpage——下一页页码；
$article_fynum——总页数。

模板调用说明
1.列表外层容器id=article-list，要与js里一致；
2.列表本身容器id="list_xx"前缀要与js里一致；
3.加载按钮（id="autopbn"行）要放到id=article-list容器之外；
4.分页代码$article_pagenav外容器要有id="fd_page_bottom"，标签要与js里一致。

js代码说明
var tableobj = $('article-list');//列表外部容器id
var nexts = s.match(/\<li id="list_(\d+)" class="item"\>(.+?)\<\/li>/g);//列表本身容器，class要写全，且id和class前后顺序必须与网页源代码里显示一致。
var newbody = document.createElement('li');//列表本身容器元素标签。
div.innerHTML = '<ul>' + nexts + '</ul>';列表外部容器元素标签。
var pageinfo = s.match(/\<div id="fd_page_bottom"\>(.+?)\<\/div\>/);//分页代码外部容器id。