使用AJAX技术，通过异步请求更新顶、踩数据，实现无刷新效果。
使用AJAX技术，通过异步请求更新顶、踩数据，实现无刷新效果。
在织梦CMS中，实现首页文章列表的无刷新顶、踩功能需要通过Ajax技术来完成，以下是详细的实现步骤：
1、创建空白首页文件并添加调用代码：在<body>标签内添加以下代码：
<ol>
{dede:arclist row='5' titlelen='20'}
<li><a href="[field:arcurl/]">[field:title/]</a>
<span id="diggNum[field:id/]">操作区：
<a href="javascript:" onclick="javascript:postDigg('good',[field:id/])">顶</a>（[field:goodpost/]）
<a href="javascript:" onclick="javascript:postDigg('bad',[field:id/])">踩</a>（[field:badpost/]）
</span>
</li>
{/dede:arclist}
</ol>
<script language="javascript" type="text/javascript">getDigg([field:id/]);</script>
这段代码使用{dede:arclist}标签来获取文章列表，并为每篇文章添加了顶和踩的按钮。postDigg函数用于处理顶和踩的操作，getDigg函数用于获取当前的顶和踩状态。
2、引入Ajax框架和编写处理函数：在<head>标签内添加以下代码：
<script language="javascript" src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function postDigg(ftype, aid) {
var taget_obj = document.getElementById("diggNum" + aid);
var saveid = GetCookie("diggid");
if (saveid != "") {
saveid = saveid.split(",");
j = 0;
hasid = false;
for (var i = 0; i < saveid.length; i++) {
if (saveid[i] == aid) {
hasid = true;
if (j >= 20) break;
} else {
saveid[i] = aid;
j++;
if (j >= 20) break;
}
}
if (hasid) {
alert("您已经顶过此帖，请不要重复！");
return;
} else {
saveid += "," + aid;
SetCookie("diggid", saveid, 1);
}
} else {
SetCookie("diggid", aid, 1);
}
myajax = new DedeAjax(taget_obj, false, "", "", "");
var url = "{dede:global.cfg_phpurl/}/digg_ajax_index.php?action=" + ftype + "&id=" + aid;
myajax.SendGet2(url);
DedeXHTTP = null;
}
function getDigg(aid) {
var taget_obj = document.getElementById("diggNum" + aid);
myajax = new DedeAjax(taget_obj, false, "", "", "");
var url = "{dede:global.cfg_phpurl/}/digg_ajax_index.php?id=" + aid;
myajax.SendGet2(url);
DedeXHTTP = null;
}
</script>
这段代码引入了织梦CMS自带的Ajax框架dedeajax2.js，并编写了两个处理函数postDigg和getDigg。postDigg函数用于处理顶和踩的操作，getDigg函数用于获取当前的顶和踩状态。
3、创建 digg_ajax_index.php 文件：在织梦CMS的/plus文件夹下创建一个名为digg_ajax_index.php的文件，并添加以下代码：
require_once('../config/global.php');
require_once('../config/config_base.php');
require_once('../include/common.inc');
$maintable = '#@__archives';
if ($_GET['action'] == 'good') {
$dsql>ExecuteNoneQuery("UPDATE$maintable SET scores = scores + $cfg_caicai_add, goodpost = goodpost + 1, lastpost = " . time() . " WHERE id = '$_GET[id]'");
} elseif ($_GET['action'] == 'bad') {
$dsql>ExecuteNoneQuery("UPDATE$maintable SET scores = scores $cfg_caicai_sub, badpost = badpost + 1, lastpost = " . time() . " WHERE id = '$_GET[id]'");
}
$row = $dsql>GetRow("SELECT * FROM$maintable WHERE id = '$_GET[id]'");
if ($row['goodpost'] + $row['badpost'] == 0) {
$row['goodper'] = $row['badper'] = 0;
} else {
$row['goodper'] = round($row['goodpost'] / ($row['goodpost'] + $row['badpost']) * 100);
$row['badper'] = round($row['badpost'] / ($row['goodpost'] + $row['badpost']) * 100);
}
echo 'document.getElementById("diggNum' . $_GET['id'] . '").innerHTML=document.getElementById("diggNum' . $_GET['id'] . '").innerHTML+"<font color='#FF0000'>顶:' . $row['goodpost'] . '</font>|<font color='#00FF00'>踩:' . $row['badpost'] . '</font>";';
这段代码用于处理顶和踩的请求，并返回更新后的顶和踩状态。
4、FAQs：
Q1：如何确保顶和踩的功能只在登录用户之间有效？
A1：可以在postDigg函数中增加对用户登录状态的判断，只有当用户登录时才允许顶和踩。
function postDigg(ftype, aid) {
if (!isLogin) { // 假设isLogin是一个判断用户是否登录的变量
alert("请先登录！");
return;
}
// 其他代码省略...
}
Q2：如何自定义顶和踩按钮的样式？
A2：可以通过修改CSS样式来自定义顶和踩按钮的外观，可以在页面的<style>标签内添加以下代码：
.good {
color: #00CC00; /* 绿色 */
}
.bad {
color: #CC0000; /* 红色 */
}
然后在顶和踩按钮的HTML代码中添加相应的类名：
<a href="javascript:" class="good" onclick="javascript:postDigg('good',[field:id/])">顶</a>
<a href="javascript:" class="bad" onclick="javascript:postDigg('bad',[field:id/])">踩</a>
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
