用Ajax方式提交form表单

深碍√TFBOYSˉ_ 2022-05-17 13:23 255阅读 0赞

# 用Ajax方式提交form表单 #

## 一、写一个表单 ##

<table> 
 <tbody> 
  <tr> 
   <td style="width:14px;"> <p>1<br> 2<br> 3</p> </td> 
   <td style="width:1.96px;">&nbsp;</td> 
   <td> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;form&nbsp;&nbsp;id="seacherInfo"&nbsp;&nbsp;action=""&nbsp;method="POST"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--表单内容（注意给表单加id）--&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/form&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

## 二、写一个提交按钮 ##

<table> 
 <tbody> 
  <tr> 
   <td style="width:2px;"> <p>1</p> </td> 
   <td style="width:1px;">&nbsp;</td> 
   <td> <p>&nbsp;&lt;button&nbsp;οnclick="dcse()"&gt;提交&lt;/button&gt;&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

给按钮加一个onclick事件，写到form表单外面

## 三，写提交的函数 ##

<table> 
 <tbody> 
  <tr> 
   <td style="width:20px;"> <p>1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> 11<br> 12</p> </td> 
   <td style="width:1px;">&nbsp;</td> 
   <td> <p>&nbsp;function&nbsp;dcse(){&nbsp;&nbsp;&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;options&nbsp;=&nbsp;{ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//在这里写ajax，传给.ajaxSubmit()方法<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:"${baseurl}selectBasicStuInfo.do",&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success&nbsp;:&nbsp;function(result){ <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(result.status)<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#seacherInfo").ajaxSubmit(options);&nbsp;//异步提交<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;}</p> </td> 
  </tr> 
 </tbody> 
</table>

ps：记得提前引入jquery和jquery-form.min.js