0%

SSM-11-JSON

Posted on In , Views: Valine:
Symbols count in article: 3.3k Reading time ≈ 3 mins.

SSM-11-JSON

  1. 对象结构
  2. 数组结构

json数据转换

HttpMessageConverter

Jackson

  • jackson-annoations-2.8.8
  • 1
  • 2

@RequestBody 和 @ResponseBody

控制器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Controller
public class UserController {

	@RequestMapping("/testJson")
	@ResponseBody
	public User testJson(@RequestBody User user) {
		System.out.println(user);
		return user;
	}
	
	@RequestMapping("/toIndex")
	public String toIndex() {
		return "index";
	}
}

jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>测试JSON交互</title>
<meta charset="UTF-8">
<script type="text/javascript" src="${pageContext.request.ContextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
	function testJson(){
		//获取用户名和密码
		var username = $("#username").value();
		var username = $("#password").value();
		$.ajax({
			url: "${pageContext.request.ContextPath}/testJson",
			type: "post",
			//data发送数据
			data: JSON.stringify({
				username: username,
				password: password
			}),
			//定义数据格式
			contentType: "application/json;charset=UTF-8",
			//定义下回调响应格式为JSON
			dataType: "json",
			//成功响应的结果
			success: function(data){
				if(data != null){
					alert("您输入的用户名为: " + data.username + "密码为: " + data.password);
				}
			}
		});
	}
</script>
</head>
<body>
	<form >
		用户名:<input type="text" name="username" id="username"/><br/>
		密&nbsp;码<input type="text" name="password" id="password"/>
		<input type="button" value="测试" onclick="testJson()"/>
		</form>
</body>
</html>

记录下犯错

  1. pageContext.request.contextPath写成pageContext.request.ContextPath 将一个字母写成大写了，找不出错
  2. index.jsp放错位置，应该放在Web-Content下
  3. js放错位置，也是Web-Content下

RESTful

软件架构风格，把请求参数变成请求路径

控制器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * 接收RESTful风格的请求,其接收方式为GET
 */
@RequestMapping(value = "/user/{id}", method = RequestMethod.GET)
@ResponseBody
public User selectUser(@PathVariable("id") String id) {
	// 查看数据接收
	System.out.println("id=" + id);
	User user = new User();
	// 模拟根据id查询出到用户对象数据
	if (id.equals("1234")) {
		user.setUsername("tom");
	}
	// 返回JSON格式的数据
	return user;
}

jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>测试JSON交互</title>
<meta charset="UTF-8">
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
	function search() {
		// 获取输入的查询编号
		var id = $("#number").val();
		$.ajax({
			url : "${pageContext.request.contextPath }/user/" + id,
			type : "GET",
			//定义回调响应的数据格式为JSON字符串,该属性可以省略
			dataType : "json",
			//成功响应的结果
			success : function(data) {
				if (data.username != null) {
					alert("您查询的用户是：" + data.username);
				} else {
					alert("没有找到id为:" + id + "的用户！");
				}
			}
		});
	}
</script>
</head>
<body>
	<form>
		编号：<input type="text" name="number" id="number"> <input
			type="button" value="搜索" onclick="search()" />
	</form>
</body>
</html>

弄完后报错

1
No converter found for return value of type: class com.itheima.po.User] with root cause

最有趣的是一直报这个错，查询百度后，很多说要GET跟SET方法，但我有，查了很多发觉依赖没导入，这是最致命的，Jack那个三个依赖导入就好了

本文作者：NoOne
本文地址： https://noonegroup.xyz/posts/fd36e449/
版权声明：转载请注明出处！