SpringMVC与Ajax交互的几种形式

情景：解析对象为json数据进行返回

SpringMVC:@RequestBody-将请求json串转化成java对象，@ResponseBody-将java对象转换成json串输出

前提：

导入json数据转换的三个核心jar包(@RequestBody和 @ResponseBody依赖)

在适配器中配置json数据转换的解析器(因为使用的注解驱动内置包含，所以不需要再进行配置)

JSP界面：引入jquery头文件，使用Jquery的Ajax提交请求信息，执行controller后返回的json串在ajax中进行解析

第一种：请求key/value，输出json串【最常用】

Ajax：

<script type="text/javascript">
function login() { 
	$.ajax({
		type : 'post',
		url : '${pageContext.request.contextPath}/user/login.mvc',
		//请求数据是key/value,这里不需要指定contentType，默认就是key/value类型
		data:'username=cyn&age=18', 
		cache : false,
		sync : true,
		success : function(msg) {
			//返回并解析json串
			alert(msg.username);	
		},
		error : function() {
			alert("请求失败!");
		}
	});
	} 
</script>

SpringMVC：

        @RequestMapping("login")
	@ResponseBody
	public User login(User user){
		System.out.println(user);
		return user;
	}

第二种：请求json串，输出json串

Ajax：

<script type="text/javascript">
function login() { 
	$.ajax({
		type : 'post',
		url : '${pageContext.request.contextPath}/user/login.mvc',
                //指定请求数据格式是json串
	        contentType:'application/json;charset=utf-8', 
		data:'{"username":"zhangsan","age":"12"}',  
		cache : false,
		sync : true,
		success : function(msg) {
			//从返回结果集中获取username的值
			alert(msg.username);	
		},
		error : function() {
			alert("请求失败!");
		}
	});
	} 
</script>

SpringMVC：

        @RequestMapping("login")
	@ResponseBody
	public User login(@RequestBody User user){
		System.out.println(user);
		return user;
	}

第三种：请求key/value，输出字符串

Ajax：

<script type="text/javascript">
function login() { 
	$.ajax({
		type : 'post',
		url : '${pageContext.request.contextPath}/user/login.mvc',
		//请求数据是key/value,这里不需要指定contentType，默认就是key/value类型
		data:'username=cyn&age=18', 
		cache : false,
		sync : true,
		success : function(msg) {
			//返回并打印字符串
			alert(msg);	
		},
		error : function() {
			alert("请求失败!");
		}
	});
	} 
</script>

SpringMVC：

        @RequestMapping("login")
	public void login(HttpServletResponse response,User user){
		
		System.out.println(user);
		try {
			response.getWriter().write(user.toString());
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

测试：

<%@ 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=ISO-8859-1">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
function login() { 
	$.ajax({
		type : 'post',
		url : '${pageContext.request.contextPath}/user/login.mvc',
		//指定请求数据格式是json串
	    contentType:'application/json;charset=utf-8', 
		data:'{"username":"zhangsan","age":"12"}',  
		cache : false,
		sync : true,
		success : function(msg) {
			//从返回结果集中获取username的值
			alert(msg);	
		},
		error : function() {
			alert("请求失败!");
		}
	});
	} 
</script>
</head>
<body>

	<button onclick="login()">发送ajax请求</button>

</body>
</html>

SpringMVC与Ajax交互的几种形式

第一种：请求key/value，输出json串【最常用】

第二种：请求json串，输出json串

第三种： 请求key/value，输出字符串

猜你喜欢

第三种：请求key/value，输出字符串