SEO学堂 - 轻松学习SEO从此开始!

成都SEO优化教程  免费SEO视频教程

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

时间:2018-09-16 14:48来源:seo 作者:SEO学堂 点击:
做项目的过程中遇到要将form表单提交转为ajax方式提交,下面是我总结的如何把form表单提交无缝转为ajax方式提交的方法。 织梦默认的表单长这样: 01 form action= /plus/diy.php enctype= multip
做项目的过程中遇到要将form表单提交转为ajax方式提交,下面是我总结的如何把form表单提交无缝转为ajax方式提交的方法。
织梦默认的表单长这样:

01 <form action="/plus/diy.php" enctype="multipart/form-data" method="post">  
02 <input type="hidden" name="action" value="post" />  
03 <input type="hidden" name="diyid" value="1" />  
04 <input type="hidden" name="do" value="2" />  
05 <table style="width:97%;" cellpadding="0" cellspacing="1">  
06 <tr>  
07 <td align="right" valign="top">电话:</td>  
08 <td><input type='text' name='dh' id='dh' style='width:250px'  class='intxt'value='' />  
09 </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 &nbsp;  
26 <input type="reset" name="reset" value="重 置" class='coolbg' />  
27 </div>  
28 </form>

要转化为ajax方式提交,需要做以下几个改变:

将form元素的属性action、enctype、method去掉,添加id="form",form元素就变为<form id="form">
引入jquery库,jquery-1.8.2.min,这个可以自行百度下载,或者引用公共库文件
提交按钮增加 onclick="add_ajaxmessage()" 并把 type="submit" 修改为 type="button" ,例如:
01 <input type="button" value="提 交" onclick="add_ajaxmessage()" />
02 删除原表单中的这些表格
03 <input type="hidden" name="action" value="post" />
04 <input type="hidden" name="diyid" value="1" />
05 <input type="hidden" name="do" value="2" />
06 <input type="hidden" name="dede_fields" value="dh,text;xy,text;nr,multitext" />
07 <input type="hidden" name="dede_fieldshash" value="ad50c1ee216430a63d64780d3e5e7262" />
08 把ajax代码放在页面最底部(不能放在jquery库之前)
09 <script type="text/javascript">
10 function add_ajaxmessage(){
11     var dataString =
12       'dh='+dh.value+ //表单的name和id值必须一致,注意:这一行最前面不能带有'&'符号
13       '&yx='+yx.value+ //表单的name和id值必须一致,多个input请自行复制此行代码
14       '&nr='+nr.value+ //表单的name和id值必须一致,多个input请自行复制此行代码
15       '&action=post'+