码迷，mamicode.com
首页 > 编程语言 > 详细

SpringMVC接收页面表单参数

时间：2016-10-31 16:18:22      阅读：323      评论：0      收藏：0      [点我收藏+]

标签：input   html   data   pat   adduser   method   bsp   idt   知识   

一个普通的表单。

技术分享

　　表单的代码如下：

 

[java] view plain copy
 
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <title>Add User</title>  
  8.   
  9.   
  10. <script type="text/javascript">  
  11.     //添加用户  
  12.     function addUser() {  
  13.         var form = document.forms[0];  
  14.         form.action = "${pageContext.request.contextPath}/user/addUser1";  
  15.         //form.action = "${pageContext.request.contextPath}/user/addUser2";  
  16.         //form.action = "${pageContext.request.contextPath}/user/addUser3";  
  17.         form.method = "post";  
  18.         form.submit();  
  19.     }  
  20. </script>  
  21.   
  22. </head>  
  23. <body>  
  24.     <form>  
  25.         <table>  
  26.             <tr>  
  27.                 <td>账号</td>  
  28.                 <td>  
  29.                     <input type="text" name="userName">  
  30.                 </td>  
  31.             </tr>  
  32.             <tr>  
  33.                 <td>密码</td>  
  34.                 <td>  
  35.                     <input type="password" name="password">  
  36.                 </td>  
  37.             </tr>  
  38.             <tr>  
  39.                 <td> </td>  
  40.                 <td>  
  41.                     <input type="button" value="提交" onclick="addUser()">  
  42.                 </td>  
  43.             </tr>  
  44.         </table>  
  45.     </form>  
  46. </body>  
  47. </html>  


1、直接把表单的参数写在Controller相应的方法的形参中

 

 

[java] view plain copy
 
  1. @RequestMapping("/addUser1")  
  2.     public String addUser1(String userName,String password) {  
  3.         System.out.println("userName is:"+userName);  
  4.         System.out.println("password is:"+password);  
  5.         return "/user/success";  
  6.     }  


2、通过HttpServletRequest接收

 

 

[java] view plain copy
 
  1. @RequestMapping("/addUser2")  
  2.     public String addUser2(HttpServletRequest request) {  
  3.         String userName = request.getParameter("userName");  
  4.         String password = request.getParameter("password");  
  5.         System.out.println("userName is:"+userName);  
  6.         System.out.println("password is:"+password);  
  7.         return "/user/success";  
  8.     }  

 

 

　3、通过一个bean来接收

　　　　1）建立一个和表单中参数对应的bean

[java] view plain copy
 
  1. public class User {  
  2.       
  3.     private String userName;  
  4.       
  5.     private String password;  
  6.   
  7.     public String getUserName() {  
  8.         return userName;  
  9.     }  
  10.   
  11.     public void setUserName(String userName) {  
  12.         this.userName = userName;  
  13.     }  
  14.   
  15.     public String getPassword() {  
  16.         return password;  
  17.     }  
  18.   
  19.     public void setPassword(String password) {  
  20.         this.password = password;  
  21.     }  
  22. }  


2）用这个bean来封装接收的参数

 

[java] view plain copy
 
  1. @RequestMapping("/addUser3")  
  2.     public String addUser3(User user) {  
  3.         System.out.println("userName is:"+user.getUserName());  
  4.         System.out.println("password is:"+user.getPassword());  
  5.         return "/user/success";  
  6.     }  


　4、通过json数据接收

 

 

[java] view plain copy
 
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <title>Add User</title>  
  8.   
  9. <script type="text/javascript" src="${pageContext.request.contextPath}/resource/script/jquery-1.9.1.min.js"></script>  
  10. <script type="text/javascript">  
  11.     $(document).ready(function(){  
  12.         $("#button_submit").click(function(){  
  13.             var name = $("#userName").val();  
  14.             var pass = $("#password").val();  
  15.               
  16.   
  17.             var user = {userName:name,password:pass};//拼装成json格式  
  18.               
  19.             $.ajax({  
  20.                 type:"POST",  
  21.                 url:"${pageContext.request.contextPath}/user/addUser4",  
  22.                 data:user,  
  23.                 success:function(data){  
  24.                     alert("成功");  
  25.                 },  
  26.                 error:function(e) {  
  27.                     alert("出错："+e);  
  28.                 }  
  29.             });  
  30.         });  
  31.     });  
  32. </script>  
  33.   
  34. </head>  
  35. <body>  
  36.     <form>  
  37.         <table>  
  38.             <tr>  
  39.                 <td>账号</td>  
  40.                 <td>  
  41.                     <input type="text" id="userName" name="userName">  
  42.                 </td>  
  43.             </tr>  
  44.             <tr>  
  45.                 <td>密码</td>  
  46.                 <td>  
  47.                     <input type="password" id="password" name="password">  
  48.                 </td>  
  49.             </tr>  
  50.             <tr>  
  51.                 <td> </td>  
  52.                 <td>  
  53.                     <input type="button" id="button_submit" value="提交">  
  54.                 </td>  
  55.             </tr>  
  56.         </table>  
  57.     </form>  
  58. </body>  
  59. </html>  


依然可以使用bean来接收json数据

 

 

[java] view plain copy
 
  1. @RequestMapping("/addUser4")  
  2.     public String addUser4(User user) {  
  3.         System.out.println("userName is:"+user.getUserName());  
  4.         System.out.println("password is:"+user.getPassword());  
  5.         return "/user/success";  
  6.     }  

 

 

5、使用jQuery的serializeArray() 方法序列化表单元素

　　　　如果表单元素很多，手工拼装成json数据非常麻烦，可以使用jQuery提供的serializeArray()方法序列化表单元素，返回json数据结构数据。

[java] view plain copy
 
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <title>Add User</title>  
  8.   
  9. <script type="text/javascript" src="${pageContext.request.contextPath}/resource/script/jquery-1.9.1.min.js"></script>  
  10. <script type="text/javascript">  
  11.     $(document).ready(function(){  
  12.         $("#button_submit").click(function(){  
  13.               
  14.             //序列化表单元素，返回json数据  
  15.             var params = $("#userForm").serializeArray();  
  16.               
  17.             //也可以把表单之外的元素按照name value的格式存进来  
  18.             //params.push({name:"hello",value:"man"});  
  19.               
  20.             $.ajax({  
  21.                 type:"POST",  
  22.                 url:"${pageContext.request.contextPath}/user/addUser5",  
  23.                 data:params,  
  24.                 success:function(data){  
  25.                     alert("成功");  
  26.                 },  
  27.                 error:function(e) {  
  28.                     alert("出错："+e);  
  29.                 }  
  30.             });  
  31.         });  
  32.     });  
  33. </script>  
  34.   
  35. </head>  
  36. <body>  
  37.     <form id="userForm">  
  38.         <table>  
  39.             <tr>  
  40.                 <td>账号</td>  
  41.                 <td>  
  42.                     <input type="text" id="userName" name="userName">  
  43.                 </td>  
  44.             </tr>  
  45.             <tr>  
  46.                 <td>密码</td>  
  47.                 <td>  
  48.                     <input type="password" id="password" name="password">  
  49.                 </td>  
  50.             </tr>  
  51.             <tr>  
  52.                 <td> </td>  
  53.                 <td>  
  54.                     <input type="button" id="button_submit" value="提交">  
  55.                 </td>  
  56.             </tr>  
  57.         </table>  
  58.     </form>  
  59. </body>  
  60. </html>  

依然可以使用bean来接收json数据：

[java] view plain copy
 
    1. @RequestMapping("/addUser5")  
    2.     public String addUser5(User user) {  
    3.         System.out.println("userName is:"+user.getUserName());  
    4.         System.out.println("password is:"+user.getPassword());  
    5.         return "/user/success";  
    6.     }  

SpringMVC接收页面表单参数

标签：input   html   data   pat   adduser   method   bsp   idt   知识   

原文地址：http://www.cnblogs.com/mqws/p/6016149.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！