欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

织梦模板

当前位置:织梦模板 > 技术文档 > 网站技巧 > 织梦列表页如何实现无刷新顶、踩效果
这篇文章主要为大家详细介绍了织梦列表页如何实现无刷新顶、踩效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

织梦dedecms内容页面是有顶、踩效果的,但是我们很多时候不光是在内容页面需要这样的效果,很多时候我们可能会再列表页面,甚至首页都需要这样的效果,我们该如何来实现呢?下面是一个用户的需要分析:

1. 列表页里面的每条信息对应一个顶和踩的按钮,然后实现javascript效果,点击后不刷新当前页面就改变数值。

2. 右侧最火、最热的列表信息块,或者是一些用户列表,要求也有如上顶、踩的功能。

3. 修改内容页顶踩的样式。

分析:

需求1和需求2其实原理一模一样,只是需求不一样而言,一些对dede不太熟悉的用户也就别大惊小怪了。

原理浅析:

实现无刷新顶、踩效果,其实就是借用javascript的ajax技术,以及javascript对文档的操作,通过ajax调用dede系统里面的plus目录下的php文件,然后返回一个参数值或者html代码(这一过程在浏览器后台执行,不刷新当前页面,所以谓之:无刷新技术),然后javascript处理获得的值或html代码在前台进行修改,然后显示。

提示:通过分析dede内容页的顶踩技术来看其实现的原理,然后模仿这个原理来实现列表页的顶踩效果。

步骤:

第一步、在需要实现效果的列表模板页添加顶、踩标签代码,比如修改list_article.htm;

{dede:list pagesize='15'}

< li><div class="share fr">

<span id="diggNum[field:id/]">

<a id="unlike" class="dig"

href="javascript:" onclick="javascript:postDigg('bad',[field:id/])">踩一下

<span class="count">(<span>[field:badpost/]</span>)</span></a>

<a id="love" class="dig"

href="javascript:" onclick="javascript:postDigg('good',[field:id/])">喜欢

<span class="count">(<span>[field:goodpost/]</span>)</span></a>

</span>

</div>

[field:wbname/]

< /li>

{/dede:list}

注:红色标记的代码十分必要,而且必须和第二步里面的javascript代码一一对应,否则没有效果。除此之外,为了更好地看到效果,将此处代码粘贴到列表页里面自行调整缩进。

第二步、在列表页<head></head>标签里引用根目录下include文件夹里的dedeajax2.js,然后添加如下javascript代码,其实这段代码是来自内容页的,只是稍作修改,主要是红色部分代码的修改,因为它必须和第一步里面的红色代码部分一一对应;

<script language="javascript" type="text/javascript"
src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js"></script>
< script language="javascript" type="text/javascript">
function postDigg(ftype,aid)
{
var taget_obj = document.getElementById('diggNum'+aid);
var saveid = GetCookie('diggid');
if(saveid != null)
{
var saveids = saveid.split(',');
var hasid = false;
saveid = '';
j = 1;
for(i=saveids.length-1;i>=0;i--)
{
if(saveids[i]==aid && hasid) continue;
else {
if(saveids[i]==aid && !hasid) hasid = true;
saveid += (saveid=='' ? saveids[i] : ','+saveids[i]);
j++;
if(j==20 && hasid) break;
if(j==19 && !hasid) break;
}
}
if(hasid) { alert("您已经顶过该帖,请不要重复顶帖 !"); return; }
else saveid += ','+aid;
SetCookie('diggid',saveid,1);
}
else
{
SetCookie('diggid',aid,1);
}
/*此处是调用dedeajax2.js文件里面的ajax类,实现无刷新数据的处理 */
myajax = new DedeAjax(taget_obj,false,false,'','','');
var url = "{dede:global.cfg_phpurl/}/digg_ajax_list.php?action="+ftype+"&id="+aid;
myajax.SendGet2(url);
}
function getDigg(aid)
{
var taget_obj = document.getElementById('diggNum'+aid);
myajax = new DedeAjax(taget_obj,false,false,'','','');
myajax.SendGet2("{dede:global.cfg_phpurl/}/digg_ajax_list.php?id="+aid);
DedeXHTTP = null;
}
< /script>

分析:

'diggNum'+aid 对应 diggNum[field:id/](第一步里面的)

{dede:global.cfg_phpurl/}/digg_ajax_list.php 

就是第三步在plus文件下创建的php文件。

第三步、在plus文件夹下创建”digg_ajax_list.php” 文件,其实这里我们完全不需要像网上另外叫的那种方法,自建一个php文件,然后在里面写一些数据处理的代码。这样对一些不擅长php代码的朋友,很是受罪,因为万一他们不小心敲错了(或许根本就没错),然后没实现效果就以为是自己弄错了,接着就是不花大把大把时间去排错,最后可能根本就解决不了问题,因为可能其实就是那个教程的问题,或者版本兼容性问题。

因此,在此推荐直接复制“digg_ajax.php”(默认的那个顶踩文件),然后修改其数据返回的html代码(下面红色标记的部分)即可。这样简单方便,而且不容易出错。

即,复制digg_ajax.php文件,然后修改名字为:digg_ajax_list.php(必须和第二步里面的文件相对应),然后修改代码如下:

< ?php
/**
*
* 文档digg处理ajax文件
*
* @version $Id: digg_ajax.php 2 13:00 2011/11/25 tianya $
* @package DedeCMS.Plus
* @copyright Copyright (c) 2007 - 2010, DesDev, Inc.
* @license http://help.dedecms.com/usersguide/license.html
* @link http://www.dedecms.com
*/
require_once(dirname(__FILE__)."/../include/common.inc.php");
$action = isset($action) ? trim($action) : '';
$id = empty($id)? 0 : intval(preg_replace("/[^\d]/",'', $id));
helper('cache');
if($id < 1)
{
exit();
}
$maintable = 'dede_archives';
$prefix = 'diggCache';
$key = 'aid-'.$id;
$row = GetCache($prefix, $key);
if(!is_array($row) || $cfg_digg_update==0)
{
$row = $dsql->GetOne("SELECT goodpost,badpost,scores FROM `$maintable` WHERE id='$id' ");
if($cfg_digg_update == 0)
{
if($action == 'good')
{
$row['goodpost'] = $row['goodpost'] + 1;
$dsql->ExecuteNoneQuery("UPDATE `$maintable` SET scores = scores + {$cfg_caicai_add},goodpost=goodpost+1,lastpost=".time()." WHERE id='$id'");
}
else if($action=='bad')
{
$row['badpost'] = $row['badpost'] + 1;
$dsql->ExecuteNoneQuery("UPDATE `$maintable` SET scores = scores - {$cfg_caicai_sub},badpost=badpost+1,lastpost=".time()." WHERE id='$id'");
}
DelCache($prefix, $key);
}
SetCache($prefix, $key, $row, 0);
} else {
if($action == 'good')
{
$row['goodpost'] = $row['goodpost'] + 1;
$row['scores'] = $row['scores'] + $cfg_caicai_sub;
if($row['goodpost'] % $cfg_digg_update == 0)
{
$add_caicai_sub = $cfg_digg_update * $cfg_caicai_sub;
$dsql->ExecuteNoneQuery("UPDATE `$maintable` SET scores = scores + {$add_caicai_sub},goodpost=goodpost+{$cfg_digg_update} WHERE id='$id'");
DelCache($prefix, $key);
}
} else if($action == 'bad')
{
$row['badpost'] = $row['badpost'] + 1;
$row['scores'] = $row['scores'] - $cfg_caicai_sub;
if($row['badpost'] % $cfg_digg_update == 0)
{
$add_caicai_sub = $cfg_digg_update * $cfg_caicai_sub;
$dsql->ExecuteNoneQuery("UPDATE `$maintable` SET scores = scores - {$add_caicai_sub},badpost=badpost+{$cfg_digg_update} WHERE id='$id'");
DelCache($prefix, $key);
}
}
SetCache($prefix, $key, $row, 0);
}
$digg = '';
if(!is_array($row)) exit();
if($row['goodpost'] + $row['badpost'] == 0)
{
$row['goodper'] = $row['badper'] = 0;
}
else
{
$row['goodper'] = number_format($row['goodpost'] / ($row['goodpost'] + $row['badpost']), 3) * 100;
$row['badper'] = 100 - $row['goodper'];
}
if(empty($formurl)) $formurl = '';
if($formurl=='caicai')
{
if($action == 'good') $digg = $row['goodpost'];
if($action == 'bad') $digg = $row['badpost'];
}
else
{
$row['goodper'] = trim(sprintf("%4.2f", $row['goodper']));
$row['badper'] = trim(sprintf("%4.2f", $row['badper']));
$digg = '<a id="unlike" class="dig"
href="javascript:" onclick="javascript:postDigg(\'bad\','.$id.')">踩一下<span class="count">(<span>'.$row['badpost'].'</span>)</span></a>
<a id="love" class="dig"
href="javascript:" onclick="javascript:postDigg(\'good\','.$id.')">喜欢<span class="count">(<span>'.$row['goodpost'].'</span>)</span></a>';
}
AjaxHead();
echo $digg;
exit();

注意到没:红色部分的php代码和第一步里面的html代码很类似,因为我们通过ajax要返回的正式这段html代码数据,然后才能实现顶踩效果后样式的统一。

到这里列表页整合无刷新顶、踩效果就完成了,可能有不完善的地方,大家多多包涵。


以上就是织梦列表页如何实现无刷新顶、踩效果的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: dedecms 织梦 ajax技术

上一篇如何提升网站流量,怎么做好网站运营呢

下一篇织梦DEDECMS批量修改域名下所有文章内的图片路径

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在