关于我们经常用到的form表单提交

　　工作中遇到了太多太多的表单提交问题，曾经学过一个HTML的表单提交给

另外一个HTML页面，对于后台怎么获取有点想不起来了。

今天便做了几个实验，提交订单到后台，来掩饰后台如何接受表单内容；

实验一：

1 <form id="myform" action="/login/abc" method="post">
2         <p>联系人：<input type="text" name="name" style=" 300px" /></p>
3         <p>电话：<input type="text" name="tel" style=" 300px" /></p>
4         <p><input type="submit" value="提交" /></p>
5 </form>

　　后台是如何接收的呢；

1 @Controller
2 @RequestMapping(value = "/login")
3 public class LoginController {
4     @RequestMapping(value = "/abc")
5     @ResponseBody
6     public void login(String name){
7         System.out.println(name);
8                 System.out.println(tel);
9     }

　　输入：周杰伦

　　　　 123456

　　点击提交按钮：

　　输出：周杰伦

　　　　 123456

　　没有问题。

实验二：

1 <form id="myform" action="/login/abc" method="post">
2         <p>联系人：<input type="text" name="name" style=" 300px" /></p>
3         <p>电话：<input type="text" name="tel" style=" 300px" /></p>
4         <p><input type="submit" value="提交" /></p>
5 </form>

　　后台现将name,和tel属性封装成一个类person

 1 public class Person {
 2     
 3     private String name;
 4     private String tel;
 5     public String getName() {
 6         return name;
 7     }
 8     public void setName(String name) {
 9         this.name = name;
10     }
11     public String getTel() {
12         return tel;
13     }
14     public void setTel(String tel) {
15         this.tel = tel;
16     }
17     
18 }

　　后台代码

1 @Controller
2 @RequestMapping(value = "/login")
3 public class LoginController {
4     @RequestMapping(value = "/abc")
5     @ResponseBody
6     public void login(Person person){
7         System.out.println(person.getName());
8         System.out.println(person.getTel());
9     }

　　依然成功；

实验三表单的ajax提交；（重点）

　　　　1.用其他的按钮代替提交按钮。

1 <body>
2     <form id="my" action="/login/abc" method="post">
3         <p>联系人：<input type="text" name="name" style=" 300px" /></p>
4         <p>电话：<input type="text" name="tel" style=" 300px" /></p>
5         <p><input type="submit" value="提交" /></p>
6     </form>
7     <input type="button" onclick="ck();" value="登录"/>
8 </body>

　　我们在form标签的外面再加一个按钮（登录）；实现点击登录按钮也提交。这时候需要在登录按钮添加方法，方法中写上

　　$("#my").submit()；

1 <script th:inline="javascript">
2         function ck(){
3             
4             $("#my").submit()
5         }
6 </script>

　　那么如何实现ajax提交呢。

 1 function ck(){
 2             
 3             
 4                 $.ajax({
 5                     url:"/login/abc",
 6                     type:"post",
 7                     dataType:"json",
 8                     data:$("#my").serializeArray(),
 9                     success:function(person){
10                         console.log(person.name);
11                     }
12                 })
13             
14             
15         }

重点重点重点：

　　data:$("#my").serializeArray(),

关于我们经常用到的form表单提交

相关推荐