当前位置：首页 > 行业动态 > 正文

dedecms js表单提交

admin
行业动态
2025-03-16
2

在DedeCMS中，通过JavaScript实现表单提交通常涉及使用AJAX技术来异步提交数据，从而避免页面刷新。以下是一个简答示例：“

javascript，document.getElementById('myForm').addEventListener('submit', function(event) {， event.preventDefault(); // 阻止默认表单提交行为， var formData = new FormData(this);， fetch('submit_url', {， method: 'POST',， body: formData， }).then(response => response.json())， .then(data => console.log(data))， .catch(error => console.error('Error:', error));，});，

“

在Dedecms中，使用JavaScript进行表单提交是一种常见的需求，尤其是在需要实现无刷新提交、前端验证或异步处理时，以下是关于如何在Dedecms中利用JavaScript进行表单提交的详细步骤和注意事项：

表单创建与配置

1、创建表单页面：

在Dedecms后台管理系统中，进入“核心”->“频道模型”->“自定义表单”，点击“增加新的自定义表单”按钮，填写表单的基本信息，如表单名称、描述等。

保存并生成表单后，可以在前台页面通过标签调用该表单。

2、添加表单字段：

在表单管理页面中，选择刚刚创建的表单，点击“字段管理”按钮。

在字段管理页面中，添加所需的字段，如文本框、下拉框、单选框等，并设置字段的属性，如字段名称、字段类型、字段标签等。

3、设置提交处理程序：

在表单模块的配置页面中，可以设置表单提交的处理程序，处理程序是用于处理表单数据的脚本文件，可以根据需要编写自己的处理程序或使用Dedecms提供的默认处理程序。

JavaScript表单提交

1、引入jQuery库：

dedecms js表单提交

在HTML头部或底部引入jQuery库，以便后续使用jQuery进行AJAX请求。

2、编写JavaScript代码：

在表单提交按钮的onclick事件中，编写JavaScript代码来拦截表单的默认提交行为，并通过AJAX方式将数据提交到服务器。

示例代码如下：

 function add_ajaxmessage(){
         var name = document.getElementById("name");
         var tel = document.getElementById("tel");
         var iphone = document.getElementById("iphone");
         var email = document.getElementById("email");
         var liuyan = document.getElementById("liuyan");
         // 定义变量接收上面表单每项的值和几个dede隐藏的input的值
         var dataString = 'name=' + name.value + '&tel=' + tel.value + '&iphone=' + iphone.value + '&email=' + email.value + '&liuyan=' + liuyan.value + '&action=post' + '&diyid=1&do=2&dede_fields=name,textchar;tel,textchar;iphone,textchar;email,textchar;liuyan,multitext';
         $.ajax({
             type: "POST",
             url: "/plus/diy.php", // 提交到后台文件
             data: dataString, // 传值
             success: function(data) {
                 alert(data); // 成功打印PHP返回的值
             }
         });
         return false;
     }

在上述代码中，dataString变量包含了表单中所有字段的值以及Dedecms要求的隐藏字段（如action、diyid、do、dede_fields等），这些值通过AJAX请求以POST方式发送到服务器端的/plus/diy.php文件进行处理。

3、处理服务器端响应：

在服务器端（通常是PHP脚本），接收并处理来自客户端的AJAX请求，根据业务逻辑对数据进行验证、存储或执行其他操作，并返回相应的响应结果给客户端。

dedecms js表单提交

示例PHP后端代码片段：

 if (!empty($dede_fields)) {
         if ($name == "") {
             echo "请填写您的姓名！"; // 注意：输出用echo输出，不要用showMsg()；
             exit();
         }
         // 其他字段验证...
     }
     $goto = !empty($cfg_cmspath) ? $cfg_cmspath : '/';
     $bkmsg = '发布成功，请等待管理员处理...';
     echo "提交成功！"; // 直接输出成功消息，不使用showmsg()函数