请选择 进入手机版 | 继续访问电脑版

织梦dedecms不跳转用ajax提交自定义表单的方法

[复制链接]
查看1384 | 回复0 | 2020-11-1 14:26 | 显示全部楼层 |阅读模式
织梦dedecms不跳转用ajax提交自定义表单的方法教程如下:
将form元素的属性action、enctype、method去掉,添加id="form",form元素就变为<form id="form">

引入jquery库,点击下面附件下载。
提交按钮增加 并把 type="submit" 修改为 type="button" ,例如:<input type="button" value="提 交" />

删除原表单中的这些表格<input type="hidden" name="action" value="post" /><input type="hidden" name="diyid" value="1" /><input type="hidden" name="do" value="2" /><input type="hidden" name="dede_fields" value="dh,text;xy,text;nr,multitext" /><input type="hidden" name="dede_fieldshash" value="ad50c1ee216430a63d64780d3e5e7262" />

把ajax代码放在页面最底部(不能放在jquery库之前)

  1. <form action="/plus/diy.php" enctype="multipart/form-data" method="post">   
  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. <table style="width:97%;" cellpadding="0" cellspacing="1">   
  6. <tr>   
  7. <td align="right" valign="top">电话:</td>   
  8. <td><input type='text' name='dh' id='dh' style='width:250px'  class='intxt' value='' />   
  9. </td>   
  10. </tr>   
  11. <tr>   
  12. <td align="right" valign="top">邮箱:</td>   
  13. <td><input type='text' name='xy' id='xy' style='width:250px'  class='intxt' value='' />   
  14. </td>   
  15. </tr>   
  16. <tr>   
  17. <td align="right" valign="top">内容:</td>   
  18. <td><textarea name='nr' id='nr' style='width:90%;height:80'></textarea>   
  19. </td>   
  20. </tr>   
  21. <input type="hidden" name="dede_fields" value="dh,text;xy,text;nr,multitext" />   
  22. <input type="hidden" name="dede_fieldshash" value="ad50c1ee216430a63d64780d3e5e7262" /></table>   
  23. <div align='center' style='height:30px;padding-top:10px;'>   
  24. <input type="submit" name="submit" value="提 交" class='coolbg' />   
  25.      
  26. <input type="reset" name="reset" value="重 置" class='coolbg' />   
  27. </div>
  28. </form>
复制代码
  1. <script type="text/javascript">
  2. function add_ajaxmessage(){
  3.     var dataString =
  4.       'dh='+dh.value+ //表单的name和id值必须一致,注意:这一行最前面不能带有'&'符号
  5.       '&yx='+yx.value+ //表单的name和id值必须一致,多个input请自行复制此行代码
  6.       '&nr='+nr.value+ //表单的name和id值必须一致,多个input请自行复制此行代码
  7.       '&action=post'+
  8.       '&diyid=1&do=2&dede_fields=dh,text;yx,text;nr,multitext&dede_fieldshash=ad50c1ee216430a63d64780d3e5e7262';
  9.     $.ajax({
  10.         type: "POST",
  11.         url: "/plus/diy.php",//提交到后台文件
  12.         data: dataString,//传值
  13.         success: function(data) {
  14.             //$("#666").html(data);//以html的形式显示在指定id的元素里,看下面注释01
  15.             alert(data);//显示PHP返回的值,如不需要显示,注释掉这行即可
  16.             $('#form')[0].reset();//提交后清除id="form"的值
  17.         }
  18.     });
  19.     return false;
  20. }
  21. </script>
复制代码
注释01:#666是指定的元素的id,例如,这样后台返回的值就会以html的样式显示在id=666的div里面,(需要在php代码中把showmsg更换为echo输出,举例:echo "自定义表单不存在";,这样就会在id=666的元素中输出红色的“自定义表单不存在")
jquery-1.8.2.min.zip (32.61 KB, 下载次数: 380)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-3-18