搜索
DEDE建站

dede手机端填单提交代码怎么写？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 13 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 38 分钟
位置： 首页 › DEDE建站 › 正文
  1. 前端：创建一个移动端友好的HTML表单，通过AJAX技术将表单数据异步提交到后端。
  2. 后端：创建一个独立的PHP处理文件，接收AJAX请求，进行数据验证、防SQL注入处理，并调用DedeCMS的核心函数将数据写入到指定的数据表中。

第一步：创建前端表单页面 (mobile_form.htm)

这个页面将展示给用户填写,我们把它放在模板目录下，/templets/your_template/mobile/ 目录。

dede手机端填单提交代码
（图片来源网络，侵删）

文件路径: /templets/your_template/mobile/mobile_form.htm

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">手机端在线报名</title>
    <!-- 引入一个移动端CSS框架，如Bootstrap或纯CSS，这里用纯CSS简化 -->
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 20px; }
        .form-container { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); max-width: 600px; margin: 0 auto; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; color: #333; }
        input[type="text"], input[type="tel"], input[type="email"], textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box; /* 重要：确保padding不会增加宽度 */
            font-size: 16px; /* 防止iOS上缩放 */
        }
        textarea { min-height: 100px; resize: vertical; }
        .submit-btn {
            width: 100%;
            padding: 15px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .submit-btn:hover { background-color: #0056b3; }
        .message { text-align: center; padding: 15px; margin-top: 20px; border-radius: 4px; display: none; }
        .message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
    </style>
</head>
<body>
    <div class="form-container">
        <h2 style="text-align: center; margin-top: 0;">在线报名</h2>
        <form id="enrollForm">
            <div class="form-group">
                <label for="name">您的姓名</label>
                <input type="text" id="name" name="name" required placeholder="请输入您的真实姓名">
            </div>
            <div class="form-group">
                <label for="phone">手机号码</label>
                <input type="tel" id="phone" name="phone" required placeholder="请输入您的手机号">
            </div>
            <div class="form-group">
                <label for="email">电子邮箱</label>
                <input type="email" id="email" name="email" placeholder="选填，用于接收通知">
            </div>
            <div class="form-group">
                <label for="message">留言内容</label>
                <textarea id="message" name="message" placeholder="请填写您的留言或需求"></textarea>
            </div>
            <button type="submit" class="submit-btn">立即提交</button>
        </form>
        <!-- 用于显示提交成功或失败的消息 -->
        <div id="ajax-message" class="message"></div>
    </div>
    <!-- 引入jQuery库，用于简化AJAX操作 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(document).ready(function() {
        $('#enrollForm').on('submit', function(e) {
            // 1. 阻止表单的默认提交行为
            e.preventDefault();
            // 2. 禁用提交按钮，防止重复点击
            $('.submit-btn').prop('disabled', true).text('提交中...');
            // 3. 收集表单数据
            var formData = $(this).serialize();
            // 4. 发送AJAX请求
            $.ajax({
                type: 'POST',
                url: '/plus/enroll.php', // 指向我们创建的后端处理文件
                data: formData,
                dataType: 'json', // 期望服务器返回JSON格式数据
                success: function(response) {
                    // 请求成功
                    if (response.status === 'success') {
                        // 显示成功消息
                        $('#ajax-message').removeClass('error').addClass('success').html(response.message).fadeIn();
                        // 清空表单
                        $('#enrollForm')[0].reset();
                    } else {
                        // 显示失败消息
                        $('#ajax-message').removeClass('success').addClass('error').html(response.message).fadeIn();
                    }
                },
                error: function(xhr, status, error) {
                    // 请求失败（如服务器错误、网络问题等）
                    $('#ajax-message').removeClass('success').addClass('error').html('提交失败，请检查网络或联系管理员。').fadeIn();
                    console.error('AJAX Error:', error);
                },
                complete: function() {
                    // 无论成功失败，都恢复提交按钮状态
                    $('.submit-btn').prop('disabled', false).text('立即提交');
                }
            });
        });
    });
    </script>
</body>
</html>

第二步：创建后端处理文件 (enroll.php)

这个文件是核心,它负责接收数据、处理数据并存入数据库。

文件路径: /plus/enroll.php (放在DedeCMS的 /plus/ 目录下是个好习惯)

<?php
/**
 * DedeCMS 手机端表单提交处理文件
 * 文件路径: /plus/enroll.php
 */
// 1. 引入DedeCMS的核心文件，以获得数据库连接和常用函数
// 如果你的DedeCMS安装在其他目录，请修改路径
require_once(dirname(__FILE__) . '/../include/common.inc.php');
// 2. 设置响应头为JSON格式，方便前端JS处理
header('Content-Type: application/json; charset=utf-8');
// 3. 初始化一个返回给前端的数组
$return_data = [
    'status'  => 'error', // 默认状态为失败
    'message' => '提交失败，请稍后重试。'
];
// 4. 接收并处理POST数据
// 使用 $_POST 接收，并用 trim() 去除首尾空格
$name = trim($_POST['name'] ?? '');
$phone = trim($_POST['phone'] ?? '');
$email = trim($_POST['email'] ?? '');
$message = trim($_POST['message'] ?? '');
// 5. 数据验证
if (empty($name) || empty($phone)) {
    $return_data['message'] = '姓名和手机号码为必填项！';
    echo json_encode($return_data, JSON_UNESCAPED_UNICODE);
    exit; // 验证失败，直接结束脚本
}
// 手机号格式验证（简单版）
if (!preg_match("/^1[3-9]\d{9}$/", $phone)) {
    $return_data['message'] = '请输入正确的手机号码！';
    echo json_encode($return_data, JSON_UNESCAPED_UNICODE);
    exit;
}
// 邮箱格式验证（选填，如果填写了则验证）
if (!empty($email) && !filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $return_data['message'] = '请输入正确的电子邮箱！';
    echo json_encode($return_data, JSON_UNESCAPED_UNICODE);
    exit;
}
// 6. 准备要插入数据库的数据
// 为了防止SQL注入，我们使用 $dsql->ExecuteNoneQuery() 并配合预处理语句的思想。
// DedeCMS的 $dsql 对象已经帮我们处理了大部分安全问题。
// 设置要插入的数据表，请替换成你自己的表名
$table_name = 'dede_enroll'; // 假设你的表名叫 dede_enroll
// 获取当前时间戳
$addtime = time();
// 创建插入数据数组
$insert_data = [
    'name'    => $name,
    'phone'   => $phone,
    'email'   => $email,
    'message' => $message,
    'addtime' => $addtime,
    'ip'      => GetIP() // 使用DedeCMS自带的函数获取访客IP
];
// 7. 使用DedeCMS的数据库类执行插入操作
// $dsql 是全局变量，已在 common.inc.php 中初始化
if ($dsql->ExecuteNoneQuery("INSERT INTO `{$table_name}` (`" . implode('`, `', array_keys($insert_data)) . "`) VALUES ('" . implode("', '", array_values($insert_data)) . "')")) {
    // 插入成功
    $return_data['status'] = 'success';
    $return_data['message'] = '提交成功！我们会尽快与您联系。';
} else {
    // 插入失败，记录错误日志（可选）
    // $dsql->GetError() 可以获取最后一次的错误信息
    // plog("Enroll submit failed: " . $dsql->GetError());
    $return_data['message'] = '数据保存失败，请联系管理员。';
}
// 8. 将结果以JSON格式返回给前端
echo json_encode($return_data, JSON_UNESCAPED_UNICODE);
// 9. 结束脚本
exit;
?>

第三步：在DedeCMS后台创建数据表

你需要手动在数据库中创建一个表来存储提交的数据。

dede手机端填单提交代码
（图片来源网络，侵删）
  1. 登录你的DedeCMS后台。
  2. 进入“系统” -> “SQL命令行工具”。
  3. 在“运行SQL命令行”的文本框中，输入以下SQL语句，然后点击“提交查询”。
CREATE TABLE `dede_enroll` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '自增ID',
  `name` varchar(50) NOT NULL COMMENT '姓名',
  `phone` varchar(20) NOT NULL COMMENT '手机号',
  `email` varchar(100) DEFAULT NULL COMMENT '邮箱',
  `message` text COMMENT '留言内容',
  `addtime` int(10) unsigned NOT NULL COMMENT '提交时间戳',
  `ip` varchar(15) NOT NULL COMMENT 'IP地址',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4 COMMENT='手机端报名表';

注意：表名 dede_enroll 必须与你在 enroll.php 文件中设置的 $table_name 变量一致。

第四步：创建栏目并添加单页面（可选但推荐）

为了让用户能访问到这个表单,你需要：

  1. 创建栏目：

    • 在后台“栏目管理”中，创建一个新栏目，在线报名”。
    • 选择“单页文档模型”。
    • 设置好栏目目录（如 enroll）。

  2. 添加文档：

    dede手机端填单提交代码
    （图片来源网络，侵删）
    • 进入这个新创建的栏目,点击“增加普通文档”。
    • 填写“手机端在线报名”。
    • 什么都不用填。
    • 自定义文件名：非常重要！填写 mobile_form.htm，这会让DedeCMS直接使用我们创建的模板文件来渲染这个页面。
    • 点击“确定”保存。

  3. 访问：

    • 现在你可以通过你的网站域名加上栏目目录来访问这个页面了,http://www.yourdomain.com/enroll/。
    • 在手机上访问这个链接,就能看到你设计的表单并正常提交了。

总结与注意事项

  • 安全性：enroll.php 文件通过 common.inc.php 获得了DedeCMS的全局 $dsql 对象，这个对象已经内置了防止SQL注入的机制（如 AddSlashes），直接拼接SQL语句虽然在这里是可行的，但对于更复杂的场景，推荐使用 $dsql->SetQuery() 和 $dsql->Execute() 的预处理模式，安全性更高。
  • 用户体验：AJAX提交的优点是无需刷新页面即可得到反馈，体验流畅，我们通过禁用提交按钮和显示加载状态，优化了用户交互。
  • 模板路径：确保 mobile_form.htm 的路径正确，并且你在后台创建单页文档时，“自定义文件名”要写对。
  • 调试：如果提交失败，可以：
    1. 检查浏览器开发者工具（F12）的“Network”面板，查看AJAX请求的响应内容，看PHP返回了什么错误信息。
    2. 检查 /plus/enroll.php 文件中 $table_name 是否和数据库表名一致。
    3. 检查数据库用户是否有对 dede_enroll 表的写入权限。

这个方案是一个完整且健壮的实现,可以直接在你的DedeCMS项目中使用。

-- 展开阅读全文 --
头像
织梦tag自动内链如何实现？
« 上一篇 02-05
dede编辑器为何无法复制表格？
下一篇 » 02-05

相关文章

取消
微信二维码
支付宝二维码

目录[+]