为discuz帖子列表页面增加ajax更新

先看效果吧：

目的就是使用户能够不用刷新就能获得帖子更新。

第一步：修改模板文件forumdisplay,htm

1、在文件开头添加ajax请求的判断

<!–{if !$inajax}–>

如图：

2、在文件结尾加上else

<!–{else}–>
{template header_ajax}
<table>
                <!–{loop $threadlist $key $thread}–>

                <tbody id=”$thread[id]“>
                    <tr>
                        <td class=”folder”>
                            <a href=”viewthread.php?tid=$thread[tid]&extra=$extra” title=”{lang target_blank}” target=”_blank”>
                            <!–{if $thread[folder] == ‘lock’}–>
                                <img src=”{IMGDIR}/folder_lock.gif” /></a>
                            <!–{elseif in_array($thread['displayorder'], array(1, 2, 3, 4))}–>
                                <img src=”{IMGDIR}/pin_$thread[displayorder].gif” alt=”$threadsticky[3-$thread[displayorder]]” /></a>
                            <!–{else}–>
                                <img src=”{IMGDIR}/folder_$thread[folder].gif” /></a>
                            <!–{/if}–>
                        </td>
                        <td class=”icon”>
                        <!–{if $thread['special'] == 1}–>
                            <a href=”forumdisplay.php?fid=$fid&filter=poll”><img src=”{IMGDIR}/pollsmall.gif” alt=”{lang thread_poll}” /></a>
                        <!–{elseif $thread['special'] == 2}–>
                            <a href=”forumdisplay.php?fid=$fid&filter=trade”><img src=”{IMGDIR}/tradesmall.gif” alt=”{lang thread_trade}” /></a>
                        <!–{elseif $thread['special'] == 3}–>
                            <a href=”forumdisplay.php?fid=$fid&filter=reward”><img src=”{IMGDIR}/rewardsmall.gif” alt=”{lang thread_reward}” <!–{if $thread['price'] < 0}–>class=”solved”<!–{/if}–> /></a>
                        <!–{elseif $thread['special'] == 4}–>
                            <a href=”forumdisplay.php?fid=$fid&filter=activity”><img src=”{IMGDIR}/activitysmall.gif” alt=”{lang thread_activity}” /></a>
                        <!–{elseif $thread['special'] == 5}–>
                            <a href=”forumdisplay.php?fid=$fid&filter=debate”><img src=”{IMGDIR}/debatesmall.gif” alt=”{lang thread_debate}” /></a>
                        <!–{else}–>
                            $thread['icon']
                        <!–{/if}–>
                        </td>
                        <!–{if $forum['ismoderator']}–>
                        <td class=”icon”>
                            <!–{if $thread['fid'] == $fid && $thread['digest'] >= 0}–>
                                <!–{if $thread['displayorder'] <= 3 || $adminid == 1}–>
                                    <input onclick=”tmodclick(this)” class=”checkbox” type=”checkbox” name=”moderate[]” value=”$thread[tid]” />
                                <!–{else}–>
                                    <input class=”checkbox” type=”checkbox” disabled=”disabled” />
                                <!–{/if}–>
                            <!–{else}–>
                                <input class=”checkbox” type=”checkbox” disabled=”disabled” />
                            <!–{/if}–>
                        </td>
                        <!–{/if}–>
                        <th class=”subject $thread[folder]“>
                            <label>{$pluginhooks[forumdisplay_thread][$key]} </label>
                            <!–{if $thread['moved']}–>
                                <!–{if $forum['ismoderator']}–>
                                    <a href=”topicadmin.php?action=moderate&optgroup=3&operation=delete&tid=$thread[moved]” onclick=”showWindow(‘mods’, this.href);return false”>{lang thread_moved}:</a>
                                <!–{else}–>
                                    {lang thread_moved}:
                                <!–{/if}–>
                            <!–{/if}–>
                            $thread[sortid] $thread[typeid]
                            <span id=”thread_$thread[tid]“><a href=”viewthread.php?tid=$thread[tid]&extra=$extra”$thread[highlight]>$thread[subject]</a></span>
                            <!–{if $thread['readperm']}–> – [{lang readperm} <span class="bold">$thread[readperm]</span>]<!–{/if}–>
                            <!–{if $thread['price'] > 0}–>
                                <!–{if $thread['special'] == ’3′}–>
                                – <span style=”color: #C60″>[{lang thread_reward}{$extcredits[$creditstransextra[2]][title]} <span class=”bold”>$thread[price]</span> {$extcredits[$creditstransextra[2]][unit]}]</span>
                                <!–{else}–>
                                – [{lang price} {$extcredits[$creditstransextra[1]][title]} <span class=”bold”>$thread[price]</span> {$extcredits[$creditstransextra[1]][unit]}]
                                <!–{/if}–>
                            <!–{elseif $thread['special'] == ’3′ && $thread['price'] < 0}–>
                                – <span style=”color: #269F11″>[{lang reward_solved}]</span>
                            <!–{/if}–>
                            <!–{if $thread['attachment'] == 2}–>
                                <img src=”images/attachicons/image_s.gif” alt=”{lang attach_img}” class=”attach” />
                            <!–{elseif $thread['attachment'] == 1}–>
                                <img src=”images/attachicons/common.gif” alt=”{lang attachment}” class=”attach” />
                            <!–{/if}–>
                            <!–{if $thread['displayorder'] == 0}–>
                                <!–{if $thread[recommendicon]}–>
                                    <img src=”{IMGDIR}/recommend_$thread[recommendicon].gif” class=”attach” alt=”{lang thread_recommend}” title=”{lang thread_recommend}” />
                                <!–{/if}–>
                                <!–{if $thread[heatlevel]}–>
                                    <img src=”{IMGDIR}/hot_$thread[heatlevel].gif” class=”attach” alt=”$thread[heatlevel] {lang heats}” title=”$thread[heatlevel] {lang heats}” />
                                <!–{/if}–>
                                <!–{if $thread['digest'] > 0}–>
                                    <img src=”{IMGDIR}/digest_$thread[digest].gif” class=”attach” alt=”{lang thread_digest} $thread[digest]” title=”{lang thread_digest} $thread[digest]” />
                                <!–{/if}–>
                                <!–{if $thread['rate'] > 0}–>
                                    <img src=”{IMGDIR}/agree.gif” class=”attach” alt=”{lang rate_credit_add}” title=”{lang rate_credit_add}” />
                                <!–{/if}–>
                            <!–{/if}–>
                            <!–{if $thread[multipage]}–>
                                <span class=”threadpages”>$thread[multipage]</span>
                            <!–{/if}–>
                        </th>
                        <td class=”author”>
                            <cite>
                            <!–{if $thread['authorid'] && $thread['author']}–>
                                <a href=”space.php?uid=$thread[authorid]“>$thread[author]</a>
                            <!–{else}–>
                                <!–{if $forum['ismoderator']}–>
                                    <a href=”space.php?uid=$thread[authorid]“>{lang anonymous}</a>
                                <!–{else}–>
                                    {lang anonymous}
                                <!–{/if}–>
                            <!–{/if}–>
                            </cite>
                            <em>$thread[dateline]</em>
                        </td>
                        <td class=”nums”><strong>$thread[replies]</strong>/<em>$thread[views]</em></td>
                        <td class=”lastpost”>
                            <cite><!–{if $thread['lastposter']}–><a href=”{if $thread[digest] != -2}space.php?username=$thread[lastposterenc]{else}viewthread.php?tid=$thread[tid]&page={echo max(1, $thread[pages]);}{/if}”>$thread[lastposter]</a><!–{else}–>{lang anonymous}<!–{/if}–></cite>
                            <em><a href=”{if $thread[digest] != -2}redirect.php?tid=$thread[tid]&goto=lastpost$highlight#lastpost{else}viewthread.php?tid=$thread[tid]&page={echo max(1, $thread[pages]);}{/if}”>$thread[lastpost]</a></em>
                        </td>
                    </tr>
                </tbody>
                <!–{/loop}–>
</table>
{template footer_ajax}
<!–{/if}–>

如图：

3、增加模板调用forumdisplay_ajax

                <!–用于ajax自动更新页面 start–>
                {template forumdisplay_ajax}
                <!–用于ajax自动更新页面 end—>

如图：

第二步：添加模板文件forumdisplay_ajax.htm到模板default目录

文件内容：

                <style type=”text/css”>
                    .newnotice{
                        font-size:13px;display:block;padding:5px 1px;margin:2px 0px 2px 0px;cursor:pointer;background:#E3F1FA;border:1px solid #C6E4F2;text-align:center;text-shadow:0 1px 0 #fff;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;z-index:2;
                    }
                    .newnotice:hover{
                        background-color:rgba(0,132,180,0.2);border-color:rgba(0,132,180,0.25);
                    }
                </style>
                <tbody style=”display:none;”>
                    <tr>
                        <td colspan=”7″><div id=”newnotice1″ class=”newnotice” onclick=”shownewthread();”> </div></td>
                    </tr>
                </tbody>
                <script type=”text/javascript”>
                var now=new Date();
                var timeline=Math.floor(now.getTime()/1000);
                var div_unread1=document.createElement(‘div’);
                div_unread1.id=”unread1″;
                div_unread1.style.display=”none”;
                var div_unread2=document.createElement(‘div’);
                div_unread2.id=”unread2″;
                div_unread2.style.display=”none”;
                _attachEvent(window, ‘load’,ajax_forum, document);

                function ajax_forum(){
                                document.body.appendChild(div_unread1);
                                document.body.appendChild(div_unread2);
                                setInterval(checknewthread,60000);
                }
                function shownewthread(){
                    var noticetbody=$(‘newnotice1′).parentNode.parentNode.parentNode;
                    noticetbody.style.display=”none”;
                    var newthreads=div_unread1.getElementsByTagName(‘tbody’);
                    var newcount=newthreads.length;
                    document.title=document.title.replace(/(.+)/g,”);
                    for(i=0;i<newcount;i++){
                        noticetbody.parentNode.insertBefore(newthreads[0],noticetbody.nextSibling);
                    }
                }
                function storenewthread(){
                    var newthreads=div_unread2.getElementsByTagName(‘tbody’);
                    var newcount=newthreads.length;
                    if(BROWSER.ie){
                        //如果是ie还要继续判断一下，ie回自动为table添加tbody
                        if(div_unread2.innerHTML.length<=32){
                            newcount=0;
                        }
                    }
                    for(i=0;i<newcount;i++){
                        //div_unread1.insertBefore(newthreads[0],div_unread1.getElementsByTagName(‘tbody’)[0]);
                        div_unread1.appendChild(newthreads[0]);
                    }
                    var newcount=div_unread1.getElementsByTagName(‘tbody’).length;
                    var newtitle=document.title;
                    if(newcount){
                        $(‘newnotice1′).innerHTML=newcount+” new threads”;
                        $(‘newnotice1′).parentNode.parentNode.parentNode.style.display=”table-header-group”;
                        if(newtitle.indexOf(‘(‘)!=-1){
                            document.title=newtitle.replace(/(.+)/g,’(‘+newcount+’)');
                        }else{
                            document.title=’(‘+newcount+’) ‘+document.title;
                        }
                    }else{
                        $(‘newnotice1′).parentNode.parentNode.parentNode.style.display=”none”;
                    }
                }
                function checknewthread(){
                    ajaxget(“forumdisplay.php?checknewthread=” + Math.random() +”&fid=”+fid+”&dateline=”+timeline,”unread2″,”,”,’none’,storenewthread);
                    now=new Date();
                    timeline=Math.floor(now.getTime()/1000);
                }
                </script>

第三步：修改forumdisplay.php（位于根目录）

1、增加数据库查询限制语句

/*用于ajax自动更新页面 start*/
$ajaxunread=false;
$ajaxunread=$inajax && $dateline && $ajaxtarget==’unread2′;
if($ajaxunread)
{
$filteraddajax=”AND dateline>=’$dateline’”;
}
/*用于ajax自动更新页面 end*/

位置在这里：

2、添加到查询中，如图的三个位置

第四步：修补一些小的细节

1、这样请求会照成对在线时间统计的混乱，相当于用户可以“挂机”了，所以对于这些请求不能计算在在线时间里

在forumdisplay.php文件里面做修改

将

updatesession()

修改成

if(!$ajaxunread)updatesession();

不过效果还没有测试。

2、本来在帖子浏览页面（viewthread.php）也是可以增加ajax请求的，样式和方法都类似，但是一般用户关注的帖子都会有短消息提示，所以我们只需要不断请求短消息就可以了（其实是我偷懒了，(^o^)/~）

discuz本身会在页面载入完成后请求一次短消息：

在include/js/common.js文件里面：

_attachEvent(window, ‘load’, pmchecknew, document);

其中的pmcheckmew是ajax请求短消息更新，

所以我们在其下面添加一段：

_attachEvent(window, ‘load’, function(){setInterval(pmchecknew,30000)}, document);

为了能够及时的更新短消息，采取的是重新再绑定函数的方法，如果直接替换掉以前的那么页面就需要在等待30s才会检查短消息。

最好更新缓存，生效！

补充：经测试ie5.5以上以及FF、chorme通过！

2010: 12/08
分类：: blog设计
7 条评论

- 耗子吴
- 十二月 9th, 2010
- 回复
- 引用
这效果有点酷，跟微博一样不用刷新了
- Lc
- 十二月 10th, 2010
- 回复
- 引用
这个功能不错哦！反向ajax
- shenmao1989
- 十二月 10th, 2010
- 回复
- 引用
@Lc 实际应用中，还是在不断完善
- shenmao1989
- 四月 5th, 2011
- 回复
- 引用
@suna托尔斯泰
- shenmao1989
- 四月 5th, 2011
- 回复
- 引用
@shenmao1989

dsdsdsds
- suna
- 四月 5th, 2011
- 回复
- 引用
test
- shenmao1989
- 四月 5th, 2011
- 回复
- 引用
@shenmao1989

1234sderf

引用网址

还没有引用通告。

一起开始的旅程.