dede自定义字段如何用js调用？-DEDE建站-盈思创科技

PHP负责从数据库中查询数据，并将其格式化为JS可以识别的格式（通常是JSON），然后JS负责接收并解析这个数据，最后将其渲染到HTML页面上。

（图片来源网络，侵删）

下面我将为你提供两种最主流、最实用的方法，并附上详细的步骤和代码示例。

PHP动态生成JS文件（推荐，性能好）

这种方法是创建一个PHP文件,但让浏览器把它当作JS文件来执行，PHP在里面执行数据库查询，并将数据打包成JS对象或变量，然后在你的页面中像引入普通JS文件一样引入它。

优点：

性能高：可以被浏览器缓存，减少服务器请求。
逻辑清晰：数据获取和页面展示逻辑分离。
易于维护：专门的数据接口，方便前端调用。

步骤：

（图片来源网络，侵删）

创建自定义字段

假设你有一个article文章表，并且你想要在文章详情页调用一个名为 video_url 的自定义字段（单行文本类型）。

创建PHP接口文件

在你的网站根目录下（或者/include/等目录），创建一个新文件，get_article_data.php。

get_article_data.php 的代码如下：

<?php
require_once (dirname(__FILE__) . "/include/common.inc.php"); // 引入Dede核心文件
// 1. 接收前端传来的参数，例如文章ID
$aid = isset($_GET['aid']) ? intval($_GET['aid']) : 0;
if ($aid > 0) {
    // 2. 使用Dede的API查询文章数据
    $arcRow = GetOneArchive($aid);
    // 3. 从主表和附加表中获取你需要的字段
    // $arcRow 包含了主表 (dede_archives) 的数据
    // 我们需要从附加表 (dede_addonarticle) 获取自定义字段
    $addonFields = $dsql->GetOne("SELECT * FROM `dede_addonarticle` WHERE `aid` = '{$aid}'");
    // 4. 合并数据，并构建一个JS对象
    $data = array(
        'title'       => $arcRow['title'],
        'pubdate'     => date('Y-m-d H:i:s', $arcRow['pubdate']),
        'video_url'   => isset($addonFields['video_url']) ? $addonFields['video_url'] : '',
        'description' => $arcRow['description']
    );
    // 5. 设置响应头，告诉浏览器这是一个JS文件
    // 防止中文乱码
    header('Content-Type: application/javascript; charset=utf-8');
    header('Cache-Control: max-age=3600'); // 缓存1小时
    // 6. 输出JS代码，将数据赋值给一个全局变量
    // 使用 json_encode 将PHP数组转换为JSON字符串，这是JS能直接使用的格式
    echo "var articleData = " . json_encode($data, JSON_UNESCAPED_UNICODE) . ";";
} else {
    // 如果没有提供ID，输出一个空对象
    header('Content-Type: application/javascript; charset=utf-8');
    echo "var articleData = {};";
}
?>

代码解释：

（图片来源网络，侵删）

require_once "include/common.inc.php"：引入DedeCMS的核心文件，这样我们才能使用Dede的函数和数据库连接。
GetOneArchive($aid)：这是DedeCMS获取文章详细信息的标准函数，它会同时查询主表和附加表，返回一个包含所有字段的数组。
header('Content-Type: ...')：关键一步，告诉浏览器这个文件的内容类型是JavaScript，这样<script src="...">标签才能正确执行它里面的代码。
json_encode()：将PHP数组转换为JSON格式的字符串。JSON_UNESCAPED_UNICODE参数可以防止中文被转义，确保JS拿到的是可读的中文。

在模板文件中调用

在你的文章详情页模板（通常是 article_article.htm）中，你就可以这样使用它。

article_article.htm 的代码片段：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">{dede:field.title/}</title>
    <!-- 引入我们刚刚创建的PHP JS文件 -->
    <script src="/get_article_data.php?aid={dede:field.id/}"></script>
</head>
<body>
    <h1>{dede:field.title/}</h1>
    <p>发布时间：<span id="pubdate"></span></p>
    <p>视频链接：<a id="video_link" href="#" target="_blank">点击观看</a></p>
    <p>{dede:field.description/}</p>
    <script>
        // 等待整个页面加载完毕后执行
        window.onload = function() {
            // 全局变量 articleData 已经被我们的PHP文件填充了
            if (articleData && articleData.video_url) {
                // 将数据动态插入到页面中
                document.getElementById('pubdate').innerText = articleData.pubdate;
                document.getElementById('video_link').href = articleData.video_url;
                document.getElementById('video_link').innerText = articleData.video_url;
            } else {
                document.getElementById('video_link').style.display = 'none'; // 如果没有视频链接，则隐藏
            }
        };
    </script>
</body>
</html>

流程总结：

浏览器请求 article_article.htm。
DedeCMS解析模板,{dede:field.id/}被替换为实际的文章ID，100。
模板中的 <script src="/get_article_data.php?aid=100"></script> 被发送给浏览器。
浏览器向服务器请求 get_article_data.php?aid=100。
PHP文件执行,查询ID为100的文章数据，并将其输出为 var articleData = { "title": "...", "video_url": "..." }; 这样的JS代码。
浏览器接收到这段JS代码并执行,全局变量 articleData 被创建。
页面继续加载,执行我们写的第二个<script>标签里的window.onload函数，从articleData中取出数据并更新页面内容。

在模板中直接内嵌JS（简单直接）

这种方法不创建单独的文件,而是直接在模板文件里用PHP查询数据，然后通过 {dede:php} 标签将数据输出给内联的JS。

优点：

简单：所有代码都在一个模板文件里，无需创建新文件。
直观：适合数据逻辑非常简单、不常变动的情况。

缺点：

性能稍差：每次访问页面都会重新执行PHP查询，无法被浏览器缓存。
耦合度高：模板文件和PHP数据逻辑混在一起，不易维护。

步骤：

在模板文件中直接编写

在你的 article_article.htm 模板文件中，可以这样写：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">{dede:field.title/}</title>
</head>
<body>
    <h1>{dede:field.title/}</h1>
    <p>发布时间：<span id="pubdate"></span></p>
    <p>视频链接：<a id="video_link" href="#" target="_blank">点击观看</a></p>
    <p>{dede:field.description/}</p>
    {dede:php}
        // 1. 获取当前文章ID
        $aid = $GLOBALS['arc']->Fields['id'];
        // 2. 查询自定义字段
        $row = $dsql->GetOne("SELECT `video_url` FROM `dede_addonarticle` WHERE `aid` = '$aid'");
        // 3. 将需要的数据转义并赋给JS变量
        // 注意：为了安全，需要对JS中的特殊字符（如引号）进行转义
        $video_url = isset($row['video_url']) ? addslashes($row['video_url']) : '';
        $pubdate = date('Y-m-d H:i:s', $GLOBALS['arc']->Fields['pubdate']);
        $title = addslashes($GLOBALS['arc']->Fields['title']);
    {/dede:php}
    <script>
        // 使用PHP变量初始化JS变量
        var js_video_url = '{dede:php}echo $video_url;{/dede:php}';
        var js_pubdate = '{dede:php}echo $pubdate;{/dede:php}';
        var js_title = '{dede:php}echo $title;{/dede:php}';
        window.onload = function() {
            if (js_video_url) {
                document.getElementById('pubdate').innerText = js_pubdate;
                document.getElementById('video_link').href = js_video_url;
                document.getElementById('video_link').innerText = js_title; // 示例：用标题作为链接文字
            } else {
                document.getElementById('video_link').style.display = 'none';
            }
        };
    </script>
</body>
</html>

代码解释：

{dede:php}...{/dede:php}：这是DedeCMS执行PHP代码的标签。
$GLOBALS['arc']->Fields['id']：在文章内容页模板中，$GLOBALS['arc'] 是文章记录集对象，可以通过它直接获取当前文章的各种字段，比再查一次数据库效率更高。
addslashes()：非常重要！ 当你把PHP变量直接输出到JS字符串中时，如果变量里包含单引号()或双引号()，会导致JS语法错误。addslashes()会为这些特殊字符加上反斜杠进行转义，确保JS代码的合法性。

总结与对比

特性	方法一 (PHP生成JS文件)	方法二 (模板内嵌JS)
性能	高 (可被浏览器缓存)	低 (每次请求都重新查询)
维护性	好 (数据与视图分离)	差 (代码耦合度高)
实现复杂度	稍高 (需创建新文件)	简单 (单文件完成)
适用场景	对性能有要求、数据不常变化、需要被多处复用的场景	快速开发、数据逻辑简单、一次性使用的场景

推荐使用方法一，因为它更符合现代前端开发的最佳实践，尤其是在构建一个健壮、高性能的网站时，方法二可以作为快速验证想法或处理非常简单需求时的备选方案。

dede自定义字段如何用js调用？

PHP动态生成JS文件（推荐，性能好）

创建自定义字段

创建PHP接口文件

在模板文件中调用

在模板中直接内嵌JS（简单直接）

在模板文件中直接编写

总结与对比

相关文章

目录[+]