一个资源分享、信息整合的综合性站点。

标题: discuz X3.2门户首页图文列表下面如何实现点击加载更多的ajax效果 [打印本页]
作者: 树苗收集系    时间: 2019-11-23 20:29
标题: discuz X3.2门户首页图文列表下面如何实现点击加载更多的ajax效果
之前有教程写了首页图文列表带分页的方法，这次结果类似但细节也有很多不同。
形式：列表底部“加载更多”按钮，加载更多帖子。和分页码有所不同，这个是ajax无刷新添加。
因为刚刚做好，还没有细琢磨，所以文件和代码比较混乱，先记录下来，比较长，不对代码做详细解释说明。

共涉及4个文件：
1.数据查询文件list_data.php（新建）
2.门户首页模板文件index.htm（默认）
3.ajax加载url入口文件ajax_page.php（新建）
4.ajax加载的列表内容模板文件ajax_page.htm（新建）
一、新建数据查询文件list_data.php，放入风格目录php文件夹（自己新建）代码：
[code]<?php
if(!defined('IN_<a href="http://www.dtyuanma.com/forum-2-1.html" target="_blank" class="relatedlink">discuz</a>')) {
        exit('Access Denied');
}
$fids='2,36,37,38,39,40,41,42,43,44';//调用的版块，多个用半角逗号分开
if($_GET['order']=='dateline' || $_GET['order']=='views' || $_GET['order']=='replies' || $_GET['order']=='digest'){
        $order= $_GET['order'];
}else{
        $order= 'dateline';
}
$messagelength='500';//内容字数
$num=10;
$begin=($_G['page']-1)*$num;
$manylist=array();
require_once libfile('function/post');
$rs=DB::query("
SELECT t.*,p.message,p.pid,f.name
FROM ".DB::table("forum_thread")." t
LEFT JOIN ".DB::table("forum_post")." p on p.tid=t.tid
LEFT JOIN ".DB::table("forum_forum")." f on f.fid=t.fid
WHERE t.`fid` in ($fids) and t.displayorder>=0 and p.first=1
group by t.tid
ORDER BY t.`$order` DESC
LIMIT $begin , $num");
while ($rw=DB::fetch($rs)) {
        $rw['message']=messagecutstr($rw['message'],$messagelength,'');
        $rw['message']=dhtmlspecialchars($rw['message']);
        $manylist[]=$rw;
}
$allnum=DB::result_first("select count(*) from ".DB::table("forum_thread")." where fid in ($fids)");
$pagenav=multi($allnum,$num,$_G['page'],"portal.php?order=$order#threadsbody");
$uid = $_G[uid];
$magic = mysql_query("select * from ".DB::table('common_magiclog')." where uid=$uid");
$magicnums = mysql_num_rows($magic);
$medal = mysql_query("select * from ".DB::table('common_member_medal')." where uid=$uid");
$medalnums = mysql_num_rows($medal);
$task = mysql_query("select * from ".DB::table('common_task')." where available=2");
$tasknums = mysql_num_rows($task);
?>
[/code]二、打开门户首页模板index.htm：
1.找到
[code]<!--{template common/header}-->
[/code][color=rgb(0, 0, 0)][backcolor=rgb(255, 255, 255)][font=&quot][size=14px]
[/size][/font][/backcolor][/color]

[backcolor=rgb(255, 255, 255)][font=microsoft yahei][color=#000000]在其下添加[/color][/font][/backcolor]
[backcolor=rgb(255, 255, 255)][code]<!--{eval require_once("template/风格目录/php/list_data.php");}-->
[/code]2.在适当位置添加列表调用代码：
[code]<div class="main">
                <div class="box main_box">
                        <!-- 帖子列表分类 -->
                        <div class="graybg graytopborder index_tab" name="threadsbody" id="threadsbody">
                                <h3 class="modname">社区帖子</h3>
                                <div class="tab" style="width: 330px;">
                                        <!--{if CURMODULE != 'guide'}-->
                                        <div id="threadthumb" class="threadthumb_{if $_G['cookie']['threadthumbhide']}no{else}yes{/if}" onclick="changethreadthumb()" style="padding-right: 20px;"><i></i>图片</div>
                                        <!--{/if}-->
                                        <ul>
                                                <li{if $_GET['order']=='dateline' || $_GET['order']==''} class="a"{/if}><a href="portal.php?order=dateline#threadsbody">时间<span></span></a></li>
                                                <li{if $_GET['order']=='replies'} class="a"{/if}><a href="portal.php?order=replies#threadsbody">回复<span></span></a></li>
                                                <li{if $_GET['order']=='views'} class="a"{/if}><a href="portal.php?order=views#threadsbody">查看<span></span></a></li>
                                                <li{if $_GET['order']=='digest'} class="a"{/if}><a href="portal.php?order=digest#threadsbody">精华<span></span></a></li>
                                        </ul>
                                </div>
                        </div>
                        <!-- 帖子列表 -->
                        <div class="thread minh" style="position: relative;">
                                <!--{eval $list_count=0;}-->
                                <!--{loop $manylist $thread}-->
                                <!--{eval $list_count+=1;}-->
                                <div class="threadlist">
                                        <div class="threadlist_stat threadlist_stat_hot">
                                                <a href="forum.php?mod=viewthread&tid=$thread[tid]" title="$thread[views] 个查看">$thread[views]</a>
                                        </div>
                                        <div class="threadlist_title">
                                                <div class="right">
                                                </div>
                                                <a href="forum.php?mod=viewthread&tid=$thread[tid]" onclick="atarget(this)" title="$thread[subject]">$thread[subject]</a>
                                                <!--{if $thread['attachment'] == 2}--><img src="static/image/filetype/image_s.gif" alt="attach_img" title="图片附件" align="absmiddle"/><!--{/if}-->
<!--{if $thread['digest'] > 0}-->
<img src="{IMGDIR}/digest_$thread[digest].gif" align="absmiddle" alt="digest" title="{lang thread_digest} $thread[digest]" />
<!--{/if}-->
                                        </div>
                                        <div class="threadlist_message"><!--{echo cutstr($thread['message'],300)}--></div>
                                        <!--{if $thread['attachment'] == 2}-->
                                        <!--{eval $table='forum_attachment_'.substr($thread['tid'], -1);}-->
                                        <!--{eval $query = DB::fetch_all("SELECT aid,tid,description,filename FROM ".DB::table($table)." WHERE tid='$thread[tid]' AND isimage!=0 ORDER BY `dateline` DESC LIMIT 0,12"); }-->
                                        <!--{eval $thread['pics']=count($query);}-->
                                        <div class="threadlist_imglist{if $_G['cookie']['threadthumbhide']} dn{/if}">
                                                <!--{eval $i=1}-->
                                                <!--{loop $query $pic}-->
                                                <!--{if $i<6}-->
                                                <div><a href="forum.php?mod=viewthread&tid=$thread[tid]#aimg_$pic[aid]"><img src="{eval echo(getforumimg($pic[aid],0,120,80))}" alt="{if $pic[description]}$pic[description]{else}$pic[filename]{/if}" title="{if $pic[description]}$pic[description]{else}$pic[filename]{/if}"/></a></div>
                                                <!--{/if}-->
                                                <!--{eval $i++}-->
                                                <!--{/loop}-->
                                        </div>
                                        <!--{/if}-->
                                        <div class="threadlist_info">
                                                <div class="lastreply">
                                                        <a href="forum.php?mod=redirect&tid=$thread[tid]&goto=lastpost#lastpost">$thread[lastposter] @ <span title="">{echo date('Y-m-d', $thread['dateline']);}</span></a>
                                                </div>
                                                <a href="home.php?mod=space&uid=$thread[authorid]">$thread[author]</a> @ {echo date('Y-m-d', $thread['dateline']);}
                                                <span class="pipe">|</span><span  class="greencolor"><a href="forum.php?mod=forumdisplay&fid=$thread[fid]"><strong>$thread[name]</strong></a></span>
                                        </div>
                                </div>
                                <!--{/loop}-->
<!--{if !$_GET['order']}--><div id="loading"><p>加载内容</p></div><!--{/if}-->
                        </div>
                        <script>
                                jQuery(function () {
         var p = {if $_GET['page'] <> ''}$_GET['page']{else}1{/if}; //记录第几页
        jQuery('#loading').click(function () {
             p += 1; //下一页
              jQuery.ajax({
                url: 'ajax_page.php',
                data: { page: p },
                cache: false,
                dataType: 'html',
                beforeSend:function(){jQuery("#loading").html("<img src='$_G['style'][styleimgdir]/images/loading.gif' />");},
                error: function() {jQuery("#loading").text("请求出错，请重试")},
                success: function (html) {
                    jQuery("#loading").html("<p>加载更多</p>");
               jQuery('#loading').before(html);
              } });
             return false;
         });
             });
     </script>
<!--{if $_GET['order']}-->
                        <!--{if $allnum>$num}-->
                        <div class="nextpage">
                                <a href="javasctipt:;">下一页</a>
                        </div>
                        <!--{/if}-->
<!--{/if}-->
                </div>
               <!--{if $_GET['order']}-->$pagenav <!--{/if}-->
        </div>
[/code]三、新建ajax加载的入口文件ajax_page.php，放在网站根目录，代码：

[code]<?php
require './source/class/class_core.php';//引入系统核心文件
$discuz = & discuz_core::instance();//以下代码为创建及初始化对象
$discuz->init();
loadcache('diytemplatename');
include template('diy:portal/ajax_page');//调用单页模版文件，路径为当前模板目录/portal/test.htm
?>
[/code]四、新建ajax加载显示的列表内容模板文件ajax_page.htm，放在门户模板partal内，代码：

[code]<!--{eval require_once("template/风格目录/php/list_data.php");}-->
<!--{eval $list_count=0;}-->
                                <!--{loop $manylist $thread}-->
                                <!--{eval $list_count+=1;}-->
                                <div class="threadlist">
                                        <div class="threadlist_stat threadlist_stat_hot">
                                                <a href="forum.php?mod=viewthread&tid=$thread[tid]" title="$thread[views] 个查看">$thread[views]</a>
                                        </div>
                                        <div class="threadlist_title">
                                                <div class="right">
                                                </div>
                                                <a href="forum.php?mod=viewthread&tid=$thread[tid]" onclick="atarget(this)" title="$thread[subject]">$thread[subject]</a>
                                                <!--{if $thread['attachment'] == 2}--><img src="static/image/filetype/image_s.gif" alt="attach_img" title="图片附件" align="absmiddle"/><!--{/if}-->
<!--{if $thread['digest'] > 0}-->
<img src="{IMGDIR}/digest_$thread[digest].gif" align="absmiddle" alt="digest"
title="{lang thread_digest} $thread[digest]" />
<!--{/if}-->
                                        </div>
                                        <div class="threadlist_message"><!--{echo cutstr($thread['message'],300)}--></div>
                                        <!--{if $thread['attachment'] == 2}-->
                                        <!--{eval $table='forum_attachment_'.substr($thread['tid'], -1);}-->
                                        <!--{eval $query = DB::fetch_all("SELECT aid,tid,description,filename FROM ".DB::table($table)." WHERE tid='$thread[tid]' AND isimage!=0 ORDER BY `dateline` DESC LIMIT 0,12"); }-->
                                        <!--{eval $thread['pics']=count($query);}-->
                                        <div class="threadlist_imglist{if $_G['cookie']['threadthumbhide']} dn{/if}">
                                                <!--{eval $i=1}-->
                                                <!--{loop $query $pic}-->
                                                <!--{if $i<6}-->
                                                <div><a href="forum.php?mod=viewthread&tid=$thread[tid]#aimg_$pic[aid]"><img src="{eval echo(getforumimg($pic[aid],0,120,80))}" alt="{if $pic[description]}$pic[description]{else}$pic[filename]{/if}" title="{if $pic[description]}$pic[description]{else}$pic[filename]{/if}"/></a></div>
                                                <!--{/if}-->
                                                <!--{eval $i++}-->
                                                <!--{/loop}-->
                                        </div>
                                        <!--{/if}-->
                                        <div class="threadlist_info">
                                                <div class="lastreply">
                                                        <a href="forum.php?mod=redirect&tid=$thread[tid]&goto=lastpost#lastpost">$thread[lastposter] @ <span title="">{echo date('Y-m-d', $thread['dateline']);}</span></a>
                                                </div>
                                                <a href="home.php?mod=space&uid=$thread[authorid]">$thread[author]</a> @ {echo date('Y-m-d', $thread['dateline']);}
                                                <span class="pipe">|</span><span  class="greencolor"><a href="forum.php?mod=forumdisplay&fid=$thread[fid]"><strong>$thread[name]</strong></a></span>

                                        </div>
                                </div>
                                <!--{/loop}-->
[/code][size=2][color=#222527][font=Helvetica, Arial, &quot]至此制作完成。[/font][/color]
[color=#222527][font=Helvetica, Arial, &quot]打开门户首页，显示调用的帖子列表，底部有“加载更多”按钮，点击可加载更多数据。[/font][/color]

[color=#222527][font=Helvetica, Arial, &quot]以上代码需要注意的：[/font][/color]
[color=#222527][font=Helvetica, Arial, &quot]1.jq代码中，[/font][/color][color=Red][font=Helvetica, Arial, &quot]jQuery([/font][/color][color=#222527][font=Helvetica, Arial, &quot]本是[/font][/color][color=Red][font=Helvetica, Arial, &quot]$([/font][/color][color=#222527][font=Helvetica, Arial, &quot]，因为我的jq冲突，所以头部添加了转换代码：[/font][/color][/size]
[/backcolor]
[color=rgb(0, 0, 0)][backcolor=rgb(255, 255, 255)][font=&quot][code]<script>var jQuery= jQuery.noConflict();</script>
[/code][color=#222527][font=Helvetica, Arial, &quot][size=2]2.加载按钮点击后会显示gif加载中效果图片，代码：[/size][/font][/color]
[size=14px][code]表示扩展图片目录/images/loading.gif。
-----------------------------------------------------------------------
不足，这个js怎么写自动加载……
[/code][code]<img src='$_G['style'][styleimgdir]/images/loading.gif' />
[/code]
[/size]
[size=14px]
[/size]
[/font][/backcolor][/color]

作者: 淡看红尘轻笑孤    时间: 2021-3-6 18:47
顶起  很好的帖
作者: 青栀琉璃裙    时间: 2022-6-18 17:04
我表示压力很大



欢迎光临 一个资源分享、信息整合的综合性站点。 (https://sorv.cn/) Powered by Discuz! X3.4