dede ajax提交-DEDE建站-盈思创科技

下面我将从原理、核心步骤、完整示例和常见问题四个方面来为你详细解析。

核心原理

DedeCMS 的 AJAX 机制并不像现代框架（如 Vue, React）那样“原生”支持，它更像是一种“约定俗成”的模式：

前端触发：在页面中，通过 JavaScript 调用 dedeajax2.js 中定义的全局函数，通常是 postCommon()。
数据封装：postCommon() 函数负责收集表单数据或自定义数据，并将其格式化为 dede 开头的 GET 参数，dede_action=xxx&dede_field1=value1。
请求发送：它会向一个固定的 AJAX 处理文件发送请求，这个文件通常是 /plus/diy.php（用于自定义表单）或你自定义的 PHP 文件。
后端处理：
- 自定义表单 (/plus/diy.php)：diy.php 会接收 dede 开头的参数，根据配置好的表单模型进行处理（如写入数据表），然后返回一个预设的成功或失败消息。
- 自定义 PHP 文件：你也可以创建一个自己的 PHP 文件（ajax_comment.php），在这个文件里接收 dede 参数，执行你的业务逻辑（如查询数据库、更新数据等），最后用 echo 输出 JSON 或纯文本作为响应。
前端响应：postCommon() 函数会接收到后端返回的数据，并通过一个回调函数来处理这个响应，例如显示成功消息、更新页面内容等。

关键点：

参数前缀：AJAX 提交的数据参数名必须以 dede_ 开头，这是 dedeajax2.js 识别和处理的关键。
回调函数：前端必须定义一个与 dede_action 值同名的 JavaScript 函数来接收后端返回的数据。

实现步骤（以自定义 AJAX 处理为例）

假设我们要实现一个“点赞”功能，点击按钮后，无需刷新页面即可增加点赞数。

步骤 1：创建前端 HTML 和 JavaScript

在模板文件中（如 article_article.htm），引入 dedeajax2.js，并编写触发 AJAX 的代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">DedeCMS AJAX 示例</title>
    {dede:global.cfg_cmsurl/}/include/dedemessages.js
    <!-- 引入核心 AJAX 库 -->
    <script src="{dede:global.cfg_cmsurl/}/include/js/dedeajax2.js"></script>
    <script>
        // 1. 定义回调函数，函数名必须与后端 dede_action 的值一致
        // 后端会返回 'success' 或 'error'
        function doLike(msg) {
            if (msg == 'success') {
                alert('点赞成功！');
                // 可以在这里更新页面上的点赞数，
                var likeCount = document.getElementById('like-count');
                likeCount.innerText = parseInt(likeCount.innerText) + 1;
            } else {
                alert('点赞失败，请重试！');
            }
        }
        // 2. 编写触发函数
        function sendLikeRequest() {
            // 获取文章ID，假设文章ID存储在某个隐藏域或通过其他方式获取
            var aid = "{dede:field.id/}";
            // 调用 dedeajax2.js 的 postCommon 函数
            // 参数格式：'处理文件名?dede_action=动作名&dede_参数1=值1&dede_参数2=值2'
            // 注意：参数名必须以 dede_ 开头
            var url = "/plus/ajax_doLike.php?dede_action=doLike&dede_aid=" + aid;
            // postCommon(url, 回调函数名)
            // 注意：第二个参数是回调函数的函数名（字符串），不是函数对象
            postCommon(url, 'doLike');
        }
    </script>
</head>
<body>
    <h1>{dede:field.title/}</h1>
    <p>文章内容...</p>
    <div>
        <span>点赞数：</span>
        <span id="like-count">10</span>
        <button onclick="sendLikeRequest()">点赞</button>
    </div>
</body>
</html>

步骤 2：创建后端 PHP 处理文件

在 /plus/ 目录下创建一个新文件，命名为 ajax_doLike.php。

<?php
/**
 * DedeCMS AJAX 点赞处理文件
 */
// 引入核心文件，确保 DedeCMS 的常量和函数可用
require_once(dirname(__FILE__) . "/../include/common.inc.php");
// 1. 接收前端传来的参数
// 注意：参数名必须与前端 dede_ 开头的参数名一致
$aid = isset($dede_aid) ? intval($dede_aid) : 0;
// 2. 执行业务逻辑
// 这里简单模拟一下，实际项目中应该查询数据库、更新、判断是否已点赞等
if ($aid > 0) {
    // 假设我们有一个表 dede_likes，结构为 (id, aid, count)
    // $row = $dsql->GetOne("SELECT count FROM `#@__likes` WHERE aid = $aid");
    // $newCount = $row['count'] + 1;
    // $dsql->ExecuteNoneQuery("UPDATE `#@__likes` SET count = $newCount WHERE aid = $aid");
    // 为了演示，我们直接返回成功
    echo 'success'; // 输出结果，将被前端回调函数接收
} else {
    echo 'error'; // 返回错误
}
// 3. 结束脚本，防止输出多余内容
exit;
?>

步骤 3：确保 `dedeajax2.js` 正常工作

dedeajax2.js 的核心函数 postCommon 通常会处理跨域问题（如果前后端域名不一致），它会动态创建一个 <iframe> 来接收响应，这是 DedeCMS AJAX 的一个经典做法。

你需要确保你的网站配置允许这种操作,并且没有阻止 iframe 的加载。

使用 DedeCMS 自定义表单 (DIY) 进行 AJAX 提交

这是 DedeCMS 内置的、更简单的 AJAX 提交方式，常用于留言、反馈等。

1: 在后台创建自定义表单

进入“核心” -> “内容模型管理” -> “自定义表单”，创建一个新的表单，比如命名为“用户反馈”。添加字段，如：姓名(text)、邮箱(email)、内容(textarea)。

2: 在前台模板中调用

在需要显示表单的模板文件（如 feedback.htm）中，使用 DedeCMS 的标签调用。

<form name='myform' action='/plus/diy.php' enctype='multipart/form-data' method='post'>
    <input type='hidden' name='dede_fields' value='name,text;email,text;content,textarea' />
    <input type='hidden' name='dede_fieldshash' value='xxxxxxxx' /> <!-- 这个值在提交时会自动生成 -->
    <p>姓名：<input type='text' name='name' id='name' /></p>
    <p>邮箱：<input type='text' name='email' id='email' /></p>
    <p>内容：<textarea name='content' id='content'></textarea></p>
    <!-- 这是关键，用于触发 AJAX 提交 -->
    <input type='button' name='submit' value='提交' onclick='return checkFeedback()' />
</form>
<!-- 引入 AJAX 库 -->
<script src="{dede:global.cfg_cmsurl/}/include/js/dedeajax2.js"></script>
<script>
    function checkFeedback() {
        // 调用 postCommon 提交表单
        // 参数1: 表单的 action 值
        // 参数2: 成功后要跳转的页面 (可以为空)
        // 参数3: 提交按钮的 name 值
        postCommonForm('myform', '', 'submit');
        return false; // 必须返回 false，阻止表单的默认提交行为
    }
    // DIY 表单的回调函数是固定的，通常为 _dopost()
    // 当提交成功后，diy.php 会执行这个函数
    function _dopost() {
        // DIY 表单提交成功后，diy.php 会输出一段 JavaScript 代码
        // 这段代码通常会调用一个名为 showMsg() 的函数来显示成功消息
        // 所以我们这里不需要做太多处理，除非你自定义了 diy.php 的返回逻辑
        // 可以隐藏表单，显示成功信息
        document.getElementById('myform').style.display = 'none';
        alert('提交成功，我们会尽快与您联系！');
    }
</script>

说明：

dede_fields：定义了表单字段及其类型，格式为 字段名,类型;。
dede_fieldshash：这是一个验证值，DedeCMS 在提交时会根据 dede_fields 计算出一个 hash 值，用于防止恶意提交。这个值在页面加载时由 DedeCMS 自动生成，你不需要手动填写，但必须保留这个 <input>
postCommonForm：dedeajax2.js 提供的专门用于提交表单的函数。


_dopost()：这是自定义表单 AJAX 提交成功后的默认回调函数名。diy.php 在处理完数据后，会输出调用 _dopost() 的 JavaScript 代码。



常见问题与注意事项


dedeajax2.js 404 Not Found

原因：文件路径错误或文件丢失。
解决：确认 {dede:global.cfg_cmsurl/}/include/js/dedeajax2.js 路径是否正确，并检查文件是否存在于 /include/js/ 目录下。



回调函数没有被调用

原因：
回调函数名与 dede_action 的值完全不同（注意大小写）。
后端 PHP 文件有语法错误，导致没有输出任何内容或输出了 HTML 页面。
网络请求失败（被浏览器安全策略阻止，或后端服务器错误）。


解决：
仔细检查函数名。
在后端 PHP 文件开头加上 header("Content-Type: text/plain");，确保返回的是纯文本。
使用浏览器开发者工具（F12）的 Network 面板，查看 AJAX 请求是否发出、状态码是什么、以及返回的具体内容是什么。





跨域问题 (CORS)

原因：如果你的前端页面和 AJAX 处理文件不在同一个域名下，现代浏览器会出于安全考虑阻止这种请求。
解决：
最佳实践：将 AJAX 处理文件放在与网站相同的域名下。
DedeCMS 的方案：dedeajax2.js 的 postCommon 函数通过创建 <iframe> 的方式巧妙地绕过了浏览器的 CORS 限制。只要你使用 postCommon 或 postCommonForm，通常不需要手动处理跨域问题。





安全性

SQL 注入：后端 PHP 文件接收参数后，必须使用 intval(), htmlspecialchars() 等函数进行过滤和验证，绝不能直接将用户输入拼接到 SQL 语句中。
CSRF：对于重要的操作（如登录、删除），可以考虑使用 DedeCMS 的 GetCSRFToken() 和 CheckCSRFToken() 机制来防止跨站请求伪造。



DedeCMS 的 AJAX 提交依赖于其特定的 dedeajax2.js 库和 dede_ 前缀的参数约定，理解了这个核心机制，你就能灵活地实现各种无刷新交互功能。

dede ajax提交

核心原理

实现步骤（以自定义 AJAX 处理为例）

步骤 1：创建前端 HTML 和 JavaScript

步骤 2：创建后端 PHP 处理文件

步骤 3：确保 `dedeajax2.js` 正常工作

使用 DedeCMS 自定义表单 (DIY) 进行 AJAX 提交

1: 在后台创建自定义表单

2: 在前台模板中调用

常见问题与注意事项

相关文章

目录[+]

核心原理

实现步骤（以自定义 AJAX 处理为例）

步骤 1：创建前端 HTML 和 JavaScript

步骤 2：创建后端 PHP 处理文件

步骤 3：确保 dedeajax2.js 正常工作

使用 DedeCMS 自定义表单 (DIY) 进行 AJAX 提交

1: 在后台创建自定义表单

2: 在前台模板中调用

常见问题与注意事项

相关文章

目录[+]

步骤 3：确保 `dedeajax2.js` 正常工作