JS如何调用织梦标签？-织梦建站-盈思创科技

直接在 JS 代码里写 {dede:arclist} 这样的标签是无效的，因为浏览器不认识它，必须由织梦的 PHP 引擎在服务器端先解析。

（图片来源网络，侵删）

下面我将分几种情况，从简单到复杂,详细讲解如何实现。

核心原理

织梦标签的解析发生在服务器端，当用户请求一个 PHP 文件时，织梦的内核会扫描文件中的 {dede:...} 标签，执行相应的 PHP 逻辑，然后将标签替换成生成的 HTML 代码，最后将纯 HTML/CSS/JS 的代码发送到用户的浏览器。

JavaScript 只能接收到已经解析完毕的 HTML 字符串，我们的任务就是想办法让织梦在特定位置生成这个 HTML 字符串，并让 JS 能够找到它。

通过隐藏的 HTML 容器（最常用、最简单）

这是最直接、最可靠的方法，适用于大多数场景，比如加载列表、内容块等。

（图片来源网络，侵删）

步骤：

在模板文件中放置一个“占位符”容器：在需要动态加载内容的地方，放一个空的 <div> 或其他容器，并给它一个唯一的 id。
将织梦标签放在这个容器内：将织梦标签直接写在占位符 div 的内部，因为织梦标签本身在未解析时是无效的，所以最好给它设置一个 style="display:none;"，或者用 PHP 判断一下，只在特定条件下才显示,避免对页面布局造成干扰。
编写 JavaScript：使用 fetch() 或 ajax 请求当前页面，织梦引擎会再次解析这个页面，生成包含最终 HTML 的代码，我们用 JS 提取出我们需要的部分,再插入到页面的最终位置。

示例：

假设你的文件是 index.php，你想在页面加载后，用 JS 的方式动态加载一个“热门文章”列表。

修改模板文件 index.php

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">我的网站</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
    <h1>欢迎访问我的网站</h1>
    <p>这里是网站的主要内容...</p>
    <!-- 
      步骤 1 & 2: 放置一个隐藏的容器，并在里面写入织梦标签。
      这个 div 在初始页面加载时是隐藏的，它只作为一个“数据源”。
    -->
    <div id="js-hot-articles-data" style="display: none;">
        {dede:arclist row='5' titlelen='30'}
        <li><a href="[field:arcurl/]">[field:title/]</a></li>
        {/dede:arclist}
    </div>
    <!-- 这是 JS 最终要把内容插入的地方 -->
    <h2>热门文章 (JS 加载)</h2>
    <ul id="js-hot-articles-container">
        <!-- JS 将在这里填充内容 -->
    </ul>
    <script>
        // 步骤 3: 编写 JS 代码
        $(document).ready(function() {
            // 使用 jQuery 的 load 方法，这是最简单的方式
            // 它会加载 #js-hot-articles-data 元素内部的 HTML，并插入到 #js-hot-articles-container 中
            $('#js-hot-articles-container').load('#js-hot-articles-data li');
        });
    </script>
</body>
</html>

工作流程：

用户访问 index.php。
织梦引擎解析 index.php，遇到 {dede:arclist...} 标签，将其替换成真实的 HTML <li> 列表。
服务器将完整的 HTML 发送到浏览器，浏览器渲染页面时，会看到一个隐藏的 <div id="js-hot-articles-data">，里面包含了 <li>...</li>，目标 <ul id="js-hot-articles-container"> 是空的。
页面加载完成后，jQuery 的 ready 函数执行。
$('#js-hot-articles-container').load('#js-hot-articles-data li'); 这行代码的作用是：找到 id 为 js-hot-articles-data 的元素，选择它内部所有的 <li> 标签，然后将这些 <li> 标签的 HTML 代码加载并插入到 id 为 js-hot-articles-container 的 <ul> 中。
用户看到“热门文章”列表被动态填充了。

优点：

简单易懂,易于实现。
不需要额外的 PHP 接口文件。
对 SEO 友好，因为内容最终会存在于页面的 HTML 源码中（尽管初始是隐藏的）。

缺点：

如果目标内容很大，可能会加载整个页面的冗余 HTML,效率稍低。

创建独立的 PHP 接口文件（更灵活、更专业）

当你需要通过 JS 动态加载大量数据，或者需要根据 JS 传递的参数（如页码、分类 ID）来获取不同内容时，创建一个独立的 PHP 接口文件是最佳选择。

步骤：

创建一个 PHP 文件作为 API：创建 api/get_articles.php。
在这个 PHP 文件中只写织梦标签和必要的初始化代码：这个文件不包含完整的 HTML 结构，只负责输出织梦标签解析后的纯 HTML。
在 JavaScript 中使用 fetch() 或 ajax 请求这个 PHP 文件。
获取返回的 HTML 数据并插入到页面。

示例：

创建 API 文件 api/get_articles.php

<?php
// 必须包含织梦的核心文件，否则标签无法解析
require_once(dirname(__FILE__) . "/../include/common.inc.php");
类型为 HTML，这样 JS 就能直接接收 HTML 字符串
header("Content-Type: text/html; charset=utf-8");
// 直接在这里写织梦标签，它会输出纯 HTML
// 我们可以在这里通过 GET 参数来控制标签的行为
$cid = isset($_GET['cid']) ? intval($_GET['cid']) : 0;
if ($cid > 0) {
    // 根据分类 ID 获取文章
    $dsql->SetQuery("SELECT id, title, arcurl FROM `#@__archives` WHERE typeid = $cid ORDER BY click DESC LIMIT 10");
} else {
    // 获取所有热门文章
    $dsql->SetQuery("SELECT id, title, arcurl FROM `#@__archives` ORDER BY click DESC LIMIT 10");
}
$dsql->Execute('hotlist');
?>
<ul class="article-list-js">
    <?php
    while ($row = $dsql->GetArray('hotlist')) {
        $title = htmlspecialchars($row['title']);
        $url = $row['arcurl'];
        echo "<li><a href='{$url}'>{$title}</a></li>";
    }
    ?>
</ul>
<?php
// 结束 PHP 执行，确保后面不会有任何多余的输出
exit();
?>

在你的前端页面（如 index.php）中调用

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">我的网站</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
    <h1>欢迎访问我的网站</h1>
    <p>这里是网站的主要内容...</p>
    <h2>热门文章 (API 加载)</h2>
    <ul id="api-hot-articles-container">
        <!-- JS 将在这里填充内容 -->
    </ul>
    <button id="load-more-btn">加载更多</button>
    <script>
        $(document).ready(function() {
            // 第一次加载
            loadArticles();
            // 绑定按钮点击事件
            $('#load-more-btn').on('click', function() {
                // 可以在这里传递参数，例如页码
                loadArticles(1); 
            });
        });
        function loadArticles(page = 1) {
            // 使用 fetch API 请求我们的 PHP 接口
            // 可以传递 GET 参数，?cid=5
            fetch('api/get_articles.php?page=' + page)
                .then(response => {
                    // 检查响应是否成功
                    if (!response.ok) {
                        throw new Error('网络响应不正常');
                    }
                    // 将响应体作为 text 获取
                    return response.text();
                })
                .then(html => {
                    // 将获取到的 HTML 插入到容器中
                    $('#api-hot-articles-container').html(html);
                })
                .catch(error => {
                    console.error('获取文章失败:', error);
                    $('#api-hot-articles-container').html('<li>加载失败，请稍后重试。</li>');
                });
        }
    </script>
</body>
</html>

工作流程：

页面加载后，loadArticles() 函数被调用。
fetch('api/get_articles.php') 向服务器发送请求。
api/get_articles.php 文件被织梦引擎执行，里面的 SQL 查询运行，<li> 列表被生成。
该 PHP 文件直接输出这个 <ul>...</ul> 的 HTML 字符串，并设置正确的 Content-Type。
浏览器的 fetch 收到这个纯 HTML 字符串。
.then(html => { ... }) 接收这个字符串，并用 $('#api-hot-articles-container').html(html); 将其插入到页面中。

优点：

高效率：只请求和传输必要的数据,没有页面冗余。
灵活性高：可以通过 GET/POST 参数向 PHP 传递数据，实现动态查询（如分页、按分类筛选等）。
代码分离：数据逻辑和页面展示逻辑分离,更易于维护。

缺点：

需要额外创建一个 PHP 文件。
需要处理跨域问题（API 和前端页面不在同一个域名下，织梦默认不允许跨域，需要配置服务器或 PHP 代码来允许）。

总结与选择

特性	隐藏容器	PHP API 接口
实现难度	非常简单	稍复杂，需创建新文件
性能	较低，可能加载冗余 HTML	高，只加载必要数据
灵活性	低，无法传递参数	高，可传递任意参数
适用场景	的简单动态展示，如首页的推荐列表、侧边栏等。	动态交互，如分页加载、筛选、搜索、按需加载大量数据等。
SEO	友好在源码中	不友好，搜索引擎无法通过 JS 获取动态加载的内容

给你的建议：

如果只是想在页面上某个地方用 JS 加载一个固定的织梦标签列表（最新文章”），使用方法一,最快最方便。
如果你的功能涉及到用户交互，比如点击“加载更多”按钮、选择分类后刷新列表、搜索框等，强烈推荐使用方法二，它是构建现代、动态网站的标准做法。

JS如何调用织梦标签？

核心原理

通过隐藏的 HTML 容器（最常用、最简单）

创建独立的 PHP 接口文件（更灵活、更专业）

总结与选择

相关文章

目录[+]