织梦自定义表单通过ajax提交的实现方法

天外飘仙

自定义表单通过ajax判断，提交不用跳转页面，提高用户体验。具体方法如下：

html表单代码部分，就提交按钮改成botton,，添加onclick事件

表单代码：

1. <form action="javascript:;" enctype="multipart/form-data" method="post">
   
2. 
   
3. <input type="hidden" name="action" value="post" />
   
4. 
   
5. <input type="hidden" name="diyid" value="1" />
   
6. 
   
7. <input type="hidden" name="do" value="2" />
   
8. 
   
9. <label>姓名：<input type="text" id="name" name="name" value="" /></label>
   
10. 
    
11. <label>电话：<input type="text" id="tel" name="tel" value="" /></label>
    
12. 
    
13. <label>手机：<input type="text" id="iphone" name="iphone" value="" /></label>
    
14. 
    
15. <label>邮箱：<input type="text" id="email" name="email" value="" /></label>
    
16. 
    
17. <table>
    
18. 
    
19. <tr>
    
20. 
    
21. <td valign="top">留言：</td>
    
22. 
    
23. <td><textarea id="liuyan" name="liuyan"></textarea></td>
    
24. 
    
25. </tr>
    
26. 
    
27. </table>
    
28. 
    
29. <input type="hidden" name="dede_fields" value="name,textchar;tel,textchar;iphone,textchar;email,textchar;liuyan,multitext" />
    
30. 
    
31. <input type="button" class="submit fr" value="提 交" onclick="add_ajaxmessage()"/>
    
32. 
    
33. </form>

复制代码

js代码（这个代码之前一定要引入jQuery库）：

f

1. unction add_ajaxmessage(){
   
2. 
   
3. var name=document.getElementById("name");
   
4. 
   
5. var tel =document.getElementById("tel");
   
6. 
   
7. var iphone=document.getElementById("iphone");
   
8. 
   
9. var email=document.getElementById("email");
   
10. 
    
11. var liuyan=document.getElementById("liuyan");
    
12. 
    
13. //定义变量接收上面表单每项的值和几个dede隐藏的input的值
    
14. 
    
15. 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';
    
16. 
    
17. $.ajax({
    
18. 
    
19. type: "POST",
    
20. 
    
21. url: "/plus/diy.php", //提交到后台文件
    
22. 
    
23. data: dataString, //传值
    
24. 
    
25. success: function(data) {
    
26. 
    
27. alert(data);//成功打印PHP返回的值
    
28. 
    
29. }
    
30. 
    
31. });
    
32. 
    
33. return false;
    
34. 
    
35. }
    

复制代码

php代码：

找到：

1. if(!empty($dede_fields))
   
2. 
   
3. {
   
4. 
   
5. //在里面加入判断语句,不判断也可以
   
6. 
   
7. if($name==""){
   
8. 
   
9. echo "请填写您的姓名！";//注意：输出用echo输出，不要用showMsg()；
   
10. 
    
11. exit();
    
12. 
    
13. }
    
14. 
    
15. }

复制代码

找到：$goto = !empty($cfg_cmspath) ? $cfg_cmspath : '/';

$bkmsg = '发布成功，请等待管理员处理...';

这两句，改成：echo "提交成功！";

删掉下面这一句：showmsg($bkmsg, $goto);

以上就是跟版网总结的内容，希望对大家有所帮助。