-
使用 AJAX + Jquery（推荐，最常用）
（图片来源网络，侵删）- 优点：实现简单，兼容性好,是前端开发的最佳实践。
- 缺点：需要页面加载 jQuery 库。
-
使用原生 JavaScript
- 优点：不依赖任何库,页面更轻量。
- 缺点：代码相对复杂一些,需要处理浏览器兼容性问题。
准备工作（两种方法通用）
在修改代码之前，请确保您的 DedeCMS 系统中文章的点击量是正常工作的，即数据库中 dede_archives 表的 click 字段有数据。
使用 AJAX + Jquery（推荐）
这是最简单、最可靠的方法。
第 1 步：在列表页模板文件中引入 jQuery
打开您的列表页模板文件，通常是 /templets/default/list_article.htm（根据您的模板路径可能不同），在 <head> 标签内或页面底部（</body> 标签之前）加入 jQuery 库的引用。
推荐使用 CDN 链接，速度快且稳定：
<!-- 在 </body> 标签之前添加 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
第 2 步：修改列表页模板，为点击量添加一个容器
在您的列表页循环中，找到显示点击量的代码,默认代码可能类似这样：
[field:click/]
我们需要将它修改成一个带有 id 的 span 标签，方便 jQuery 定位和操作。
修改前：
<li>
<a href="[field:arcurl/]">[field:title/]</a>
<span>点击：[field:click/]</span>
</li>
修改后（关键步骤）：
我们需要给每个点击量容器一个唯一的 id，DedeCMS 的 [field:id/] 标签可以完美实现这一点。
<li>
<a href="[field:arcurl/]">[field:title/]</a>
<span>点击：<span id="click_count_[field:id/]">加载中...</span></span>
</li>
说明：
- 我们将
[field:click/]替换为了<span id="click_count_[field:id/]">加载中...</span>。 id="click_count_[field:id/]"会为每篇文章生成一个唯一的 ID，click_count_10、click_count_11等。- 初始显示“加载中...”，在页面加载完成后，AJAX 会用真实数据替换它。
第 3 步：创建一个专门用于获取点击量的 PHP 文件
我们需要一个后台接口来响应 AJAX 请求,并返回某篇文章的点击量。
- 在您的网站根目录下创建一个新文件，
get_click.php。 - 将以下代码复制到
get_click.php文件中：
<?php
require_once (dirname(__FILE__) . "/include/common.inc.php");
// 获取从AJAX传过来的文章ID
$aid = isset($_GET['aid']) ? intval($_GET['aid']) : 0;
if ($aid > 0) {
// 查询数据库获取点击量
$row = $dsql->GetOne("SELECT click FROM `#@__archives` WHERE id = {$aid}");
// 如果查询成功，则输出点击量，否则输出0
if (is_array($row)) {
echo $row['click'];
} else {
echo '0';
}
} else {
// 如果ID无效，输出0
echo '0';
}
?>
说明：
- 这段代码安全地接收文章ID,并从数据库中查询对应的点击量。
echo $row['click'];将点击量作为纯文本返回给前端。
第 4 步：编写 AJAX 脚本
我们编写 JavaScript 代码来在页面加载完成后，遍历所有文章，并向 get_click.php 发送请求。
将以下代码添加到您的列表页模板中，可以放在引入 jQuery 的 <script> 标签内，或者新建一个 JS 文件引入。
<script>
$(document).ready(function() {
// 遍历所有带有 "click_count_" 前缀的元素
$("span[id^='click_count_']").each(function() {
var spanElement = $(this); // 当前点击量容器
var articleId = spanElement.attr('id').replace('click_count_', ''); // 从ID中提取文章ID
// 使用AJAX获取点击量
$.ajax({
url: "/get_click.php", // 第3步创建的PHP文件路径
type: "GET",
data: { aid: articleId }, // 传递文章ID
dataType: "text", // 期望返回纯文本数据
success: function(clickCount) {
// 成功获取数据后，将点击量更新到对应的span中
spanElement.text(clickCount);
},
error: function() {
// 如果请求失败，可以显示一个错误信息或保持原样
// spanElement.text("获取失败");
}
});
});
});
</script>
- 打开
list_article.htm。 - 在
<head>或</body>前添加 jQuery CDN 链接。 - 找到 `[field:click/]，将其修改为
<span id="click_count_[field:id/]">加载中...</span>。 - 在网站根目录创建
get_click.php，并粘贴 PHP 代码。 - 在
list_article.htm中添加最后的 AJAX JavaScript 代码。
当您访问列表页时，会看到点击量短暂显示“加载中...”，然后页面会自动、无刷新地更新为真实的点击量。
使用原生 JavaScript
如果您不想引入 jQuery，可以使用原生 JS 实现。
第 1 步：修改列表页模板（与方法一相同）
这一步完全相同，打开 list_article.htm，将点击量代码修改为带唯一 id 的 span。
<span>点击：<span id="click_count_[field:id/]">加载中...</span></span>
第 2 步：创建获取点击量的 PHP 文件（与方法一相同）
这一步也完全相同，创建 get_click.php 文件,代码与方法一的第3步完全一样。
第 3 步：编写原生 JavaScript 脚本
在 希望这个详细的教程能帮助您成功实现 DedeCMS 5.7 列表页动态读取点击量的功能！强烈推荐使用方法一（AJAX + Jquery），因为它更简洁、更易于维护。list_article.htm 中添加以下 <script>
<script>
window.onload = function() {
// 获取所有 id 以 'click_count_' 开头的元素
var clickSpans = document.querySelectorAll("span[id^='click_count_']");
// 遍历这些元素
clickSpans.forEach(function(span) {
var articleId = span.id.replace('click_count_', '');
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 配置请求
xhr.open("GET", "/get_click.php?aid=" + articleId, true);
// 设置回调函数
xhr.onreadystatechange = function() {
// 当请求完成 (readyState=4) 且成功 (status=200)
if (xhr.readyState == 4 && xhr.status == 200) {
// 将返回的点击量更新到 span 中
span.textContent = xhr.responseText;
}
};
// 发送请求
xhr.send();
});
};
</script>
注意事项与优化建议
get_click.php 可以加入简单的缓存机制，比如用 file_put_contents 将点击量缓存到文件中，几秒后再去查询数据库,以减少数据库查询次数。
