SpringMVC接收页面表单参数

34 篇文章 0 订阅
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(){
	}
});



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值