springmvc处理ajax请求

刺骨的言语ヽ痛彻心扉 2022-05-13 15:00 241阅读 0赞

springmvc与ajax的交互在实际开发中十分常见，以下是对springmvc与ajax交互时参数的传递与接收做的一些整理

jsp页面：

<form id="login" style="width:600px; border:1px solid #000;border-left:none;border-right:none">   
    	<p align="center">账号：<input type="text" id="username" /></p>   
    	<p align="center">密码：<input type="password" id="password" /></p>   
    	<p align="center"><input type="submit" id="submit" value="登录" /></p>  
    </form>在这里插入代码片

一、ajax请求如下：**contentType：application/x-www-form-urlencoded**  
发送的数据格式为“A=xxx&B=xxx”data数据不是json对象

$(function(){ 
    	$("#submit").click(function(){ 
    		$.ajax({ 
    			type: "POST",
    			//contentType : 'application/x-www-form-urlencoded',//默认类型
    			url: '${pageContext.request.contextPath}/databind/json',
    			dataType: "json",
    			data: { username:$('#username').val(),
    				  password:$('#password').val()},
    			success: function(data){ 
    				alert('username : '+data.username+'\npassword : '+data.password);
    			}
    		}); 
    	});
    });

由于contentType : ‘application/x-www-form-urlencoded’，最终参数是以username=admin&password=123456这个格式传至后台，当然你也可以利用占位符直接传字符串过去（后台使用@PathVariable注解逐个接收），但是，如果项目中字段还是特别多的，这样拼接会相当繁琐，然而我们知道还有个方法供我们使用，jQuery给我们提供的\*\*$(“\#login”).serialize()序列化表单\*\*。

$(function(){ 
    	$("#submit").click(function(){ 
    		var params = $("#login").serialize();//序列化表单
    		alert(params);
    		$.ajax({ 
    			type: "POST",
    			url:  '${pageContext.request.contextPath}/databind/json',
    			dataType: "json",
    			data: params,
    			success: function(data){ 
    				alert('username : '+data.username+'\npassword : '+data.password);
    			}
    		}); 
    	});
    });

后台springmvc接收参数方式如下：  
**1.直接使用参数名接收：无需注解**  
参数较少的情况可以使用

@RequestMapping(value="json", method = { RequestMethod.POST})
    @ResponseBody
    public Account json(String username,String password){ 
        Account account = new Account();
        account.setUsername(username);
        account.setPassword(password);
        return account;
    }

**2.使用pojo对象接收：无需注解**  
参数较多的情况下，使用对象一次性接收多个参数，简单快捷；  
使用pojo对象接受参数不需要@RequestParam注解前缀，只需将实体中的属性名与参数名一一对应即可，因为该注解是通过指定的参数名获取请求中的参数，而pojo对象并不是请求中的参数名，只是用来封装参数的容器；

@RequestMapping(value="/json", method = { RequestMethod.POST})
    @ResponseBody
    public Account json(Account account){ 
        System.out.println(account);
        return account;
    }

**3.使用@RequestParam注解接收：**  
每个@RequestParam注解只能获取对应的一个参数，请求的参数和接受参数必须同名，否则无法接受；  
前面我们已经看到了，接受单个基本类型值的参数，只要在方法中分别写下对应的参数名，并不需要使用什么注解就能拿到传过来的值，那为什么还有@RequestParam这个注解呢，并且看到很多地方都在用。  
其实呢这个注解，有它的用处，并不是一无是处，首先作为基本类型的参数，如果不使用注解，是可传可不传的，如果为null并不会报错，但当你使用了@RequestParam注解，那么此时该参数就是必传的了，如果不传就会报错，然而还是可以通过配置来让其可不必传，如@RequestParam(value=”username”, required=false)，此外，该注解还可以设置如果前台没有传值过来，会给一个默认值，如@RequestParam(value=”username”, defaultValue=”ruo”)。  
我对该注解做的总结是：如果你某个参数不是必传的，就别用它了，如果是必传的，请一定用上它，如果必传参数可以有默认值的话，还请加上defaultValue默认值；

@RequestMapping(value="json", method = { RequestMethod.POST})
    @ResponseBody
    public Account json(@RequestParam(value = "username")String username, 
    	@RequestParam(value = "password")String password){ 
    	Account account = new Account();
    	account.setUsername(username);
    	account.setPassword(password);
    	return account;
    }

二、ajax请求如下：**contentType : 'application/json’**  
注意：若设置contentType : ‘application/json’发起请求，data必须将JavaScript对象转换成json字符串，否则后台接收不到参数，导致报错。

$(function() { 
    	$("#submit1").click(function() { 
    		var json = { 
    			'username':$(':input[name=username]').val(),
    			'password':$(':input[name=password]').val()
    		};
    		var postdata = JSON.stringify(json);//JavaScript对象转换json字符串
    		alert(postdata);
    		$.ajax({ 
    			type : 'POST',
    			contentType : 'application/json',//json类型
    			/** *(默认: true) 默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)， * 都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。 * 如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。 */
    			processData : false,
    			url : '${pageContext.request.contextPath}/databind/json',
    			dataType : 'json',
    			data : postdata,
    			success : function(data) { 
    				alert('username : '+data.username+'\npassword : '+data.password);
    			},
    			error : function() { 
    				alert('error...');
    			}
    		});
    	});			
    });

后台springmvc接收参数方式如下：  
**1.使用@RequestBody接收：**  
@RequestBody用于把接收到的JSON、xml数据转化为Pojo对象接收

@RequestMapping(value="json", method = { RequestMethod.POST})
    @ResponseBody
    public Account requestBodyBind(@RequestBody Account account){ 
        System.out.println("requestbodybind:" + account);
        return account;
    }

反例：contentType : ‘application/json’发起的请求，我们能不能用如下的方式接收值呢

@RequestMapping(value="json", method = { RequestMethod.POST})
    @ResponseBody
    public Account json(String username, String password){ 
    	Account account = new Account();
    	account.setUsername(username);
    	account.setPassword(password);
    	return account;
    }

答案是不可以的，会抛异常，400 Bad Request  
究其原因是：contentType : ‘application/json’数据发送后台接收必须是Modle，不能是单个属性，且必须加上@RequestBody注解。