如何在不刷新页面的情况下实现Dedecms首页文章列表的顶和踩功能？

使用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>

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1216567.html