DedeCMS织梦

Dedecms织梦jquery+ajax方式提交自定义表单

阿里云

我们开发 DedeCMS 模板,接触到织梦的自定义表单是必不可少的,但是默认的自定义表单都是跳转方式完成提交,很不友好,今天我们可以借助 jquery ajax 提交 dedecms 自定义表单到后台。此例只做为参考,实际项目中根据自己的情况酌情修改。

HTML 部分

  1.     <form action="/plus/diy.php" enctype="multipart/form-data" method="post" id="diyform">
  2.     <input type="hidden" name="action" value="post" />
  3.     <input type="hidden" name="diyid" value="1" />
  4.     <input type="hidden" name="do" value="2" />
  5.     <input type="hidden" name="dede_fields" value="mail_name,text;mail_phone;mail_content,multitext" />
  6.     <input type="hidden" name="dede_fieldshash" value="86d34525cf75f8652022f6446152028d" />
  7.     <input type="hidden" name="setup" value="ajax" />
  8.         <div class="mail_rdd">
  9.             <div class="mail_content">
  10.                 <table border="1" width="100%" class="mail_form">
  11.                 <tr>
  12.                     <td width="50">
  13.                         姓名:
  14.                     </td>
  15.                     <td class="mail_input_bg1">
  16.                         <input type="text" name="mail_name" id="mail_name" maxlength="20"/>
  17.                     </td>
  18.                 </tr>
  19.                 <tr>
  20.                     <td>
  21.                         电话:
  22.                     </td>
  23.                     <td class="mail_input_bg1">
  24.                         <input type="text" name="mail_phone" id="mail_phone" maxlength="20"/>
  25.                     </td>
  26.                 </tr>
  27.                 <tr style="height:240px">
  28.                     <td>
  29.                         留言:
  30.                     </td>
  31.                     <td class="mail_input_bg3">
  32.                         <textarea name="mail_content" id="mail_content"></textarea>
  33.                     </td>
  34.                 </tr>
  35.                 </table>
  36.                 <div class="mail_button_bar">
  37.                     <div class="mail_button confirm" onclick="send()">
  38.                     </div>
  39.                 </div>
  40.             </div>
  41.         </div>
  42.     </form>
也想出现在这里?联系我们
创客主机

JS 部分

  1.     <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
  2.     <script>
  3.     function send(){
  4.         $.ajax({
  5.             cache: true,
  6.             type: "POST",
  7.             url:"/plus/diy.php",
  8.             data:$('#mail_form').serialize(),
  9.             success: function(data) {
  10.                 if(data=="success"){
  11.                     alert('发送成功!');
  12.                 }else{
  13.                     alert('发送失败!');
  14.                 }
  15.             }
  16.         });
  17.     }
  18.     </script>

/plus/diy.php 修改找到 showMsg($bkmsg,-1,0,3000); 改成:

  1.     if($setup == 'ajax')
  2.     {
  3.         echo "success";
  4.         exit;
  5.     }
  6.     else
  7.     {
  8.         showMsg($bkmsg,-1,0,3000);
  9.     }

如果是 gbk 编码的童鞋,还要修改/plus/diy.php,解决乱码问题找到 $addvalue .= ", '".${$fieldinfo[0]}."'"; 改成:

  1. $addvalue .= ", '".iconv( "UTF-8", "gb2312//IGNORE" , ${$fieldinfo[0]})."'";

$.post 方法

  1.     var dataString = {
  2.         'name':$("#name").val(),
  3.         'tel':$("#tel").val(),
  4.         'setup':'ajax',
  5.         'action':'post',
  6.         'diyid':1,
  7.         'do':2,
  8.         'dede_fields':'name,text;tel,text',
  9.         'dede_fieldshash':'6b5fb808a4b9ea6d0603d983246a88a1',
  10.     };
  11.     $.post("/plus/diy.php",dataString,function(result){
  12.         if(result=="1"){
  13.             alert('发送成功!');
  14.             $('#diyform').reset();//重置form
  15.         }else{
  16.             alert('发送失败!');
  17.         }
  18.     });

Dedecms 织梦 jquery+ajax 方式提交自定义表单

已有 412 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!