• SpringMVC接收页面表单参数


    表单的代码如下:

    [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.     }  
  • 相关阅读:
    Linux基础知识--目录操作
    Linux基础知识--命令的基础知识
    Linux基础知识--磁盘分区和目录结构
    PO设计模式
    SSL连接形式发送邮件
    已附件的形式发送测试报告
    Python+selenium+HTMLTestRunner邮件形式发送测试报告
    Python随笔13
    Python随笔12
    Python随笔11
  • 原文地址:https://www.cnblogs.com/jizhuan/p/5602746.html
Copyright © 2020-2023  润新知