SpringMVC接收页面表单参数

最新推荐文章于 2024-05-20 10:00:00 发布

爱吃鱼油

最新推荐文章于 2024-05-20 10:00:00 发布

阅读量521

点赞数

分类专栏： java json Spring 文章标签： springMVC

java 同时被 3 个专栏收录

62 篇文章 0 订阅

订阅专栏

Spring

34 篇文章 0 订阅

订阅专栏

json

10 篇文章 1 订阅

订阅专栏

转载：http://825635381.iteye.com/blog/2196911

<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Add User</title> 
<script type="text/javascript">  
    //添加用户  
    function addUser() {
        var form = document.forms[0];
        form.action = "${pageContext.request.contextPath}/user/addUser1";
        form.method = "post";
        form.submit();
    }  
</script>
</head>
<body>
   <form id="userForm"> 
        <table>
            <tr>
                <td>账号</td>
                <td>
                    <input type="text" name="userName">
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td>  
                    <input type="password" name="password">
                </td>
            </tr>
            <tr>
                <td> </td>
                <td>
                    <input type="button" value="提交" id="button_submit" οnclick="addUser()">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

第一种 使用springmvc注解接收参数

@RequestMapping("testRequestParam")
public String addUser(	@RequestParam(value="userName", required=true) String userName, 
						@RequestParam(value="password", required=true) String password, ){

}

第二种 用实体JavaBean 接收

public class User {  
      
    private String userName; 
    private String password;  
  
  //略set() get()
}

controller

@RequestMapping("/addUser1")
public String addUser3(User user) {
	System.out.println("userName is:"+user.getUserName());
	System.out.println("password is:"+user.getPassword());
	return "/user/success";
}

第三种 页面表单发送json格式的参数

<script type="text/javascript">  
    $(document).ready(function(){  
        $("#button_submit").click(function(){  
            var name = $("#userName").val();  
            var pass = $("#password").val();
            var user = {userName:name,password:pass};//拼装成json格式  
              
            $.ajax({  
                type:"POST",  
                url:"${pageContext.request.contextPath}/user/addUser4",  
                data:user,  
                success:function(data){  
                    alert("成功");  
                },  
                error:function(e) {  
                    alert("出错："+e);  
                }  
            });  
        });  
    });  
</script>

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

<script type="text/javascript" src="${pageContext.request.contextPath}/resource/script/jquery-1.9.1.min.js"></script>  
<script type="text/javascript">  
    $(document).ready(function(){  
        $("#button_submit").click(function(){
		
            //序列化表单元素，返回json数据  
            var params = $("#userForm").serializeArray();  
              
            //也可以把表单之外的元素按照name value的格式存进来  
            //params.push({name:"hello",value:"man"});  
              
            $.ajax({  
                type:"POST",  
                url:"${pageContext.request.contextPath}/user/addUser5",  
                data:params,  
                success:function(data){  
                    alert("成功");  
                },  
                error:function(e) {  
                    alert("出错："+e);  
                }  
            });  
        });  
    });  
</script>

依然可以用JavaBean 接收

@RequestMapping("/addUser1")
public String addUser3(User user) {
	System.out.println("userName is:"+user.getUserName());
	System.out.println("password is:"+user.getPassword());
	return "/user/success";
}

自定义 serializeJSON() 函数

(function(){
	 $.fn.serializeJson=function(){  
         var serializeObj={};  
         var array=this.serializeArray();  
         var str=this.serialize();  
         $(array).each(function(){  
             if(serializeObj[this.name]){  
                 if($.isArray(serializeObj[this.name])){  
                     serializeObj[this.name].push(this.value);  
                 }else{  
                     serializeObj[this.name]=[serializeObj[this.name],this.value];  
                 }  
             }else{  
                 serializeObj[this.name]=this.value;   
             }  
         });  
         return serializeObj;  
     };  
     
})(jQuery);

调用

$.ajax({
	dataType:'json',
	type:'POST',
	url : "check/addCheckInfo",
	data : $("#userForm").serializeJSON(),
	success: function(data) {

	},
	error:function(){
	}
});