工作中遇到了太多太多的表单提交问题，曾经学过一个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(),