第1-2节
JSON.parse()【从一个字符串中解析出json对象】
JSON.stringify()【从一个对象中解析出字符串】
json交互
json形式
1、json对象
{key1:value1,key2:value2}
2、json数组
[{key1:value1,key2:value2},{key1:value1,key2:value2},{key1:value1,key2:value2}]
准备工作
引jar,相关的pom描述:
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.8.8</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.8.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.8</version>
</dependency>
模拟正式开发-开发准备
1）有一个java类，tabclass,想要对他进行操作
public class TabClass {
private int classId;
private String className;
......
}
如果是请求添加，应该收到classid,classname.给用户返回处理结果。我拼装一个返回对象（返回码和描述）
0 -成功
999-未知异常
-1 -失败
2）操作返回对象
public class ResultMsg {
private int resultCode;
private String errorMsg;
。。。。。。
}
3）src/main/webapp下新建js包，将jquery-1.11.2.min.js拷贝进来
请求是key-value,响应json
addclass.jsp增加以下代码，利用form表单序列化功能
<input type="button" id="btn2" value="请求kv,响应json"/>
$("#btn2").bind("click",function(){
$.ajax({
type: "POST",
url: "<%=request.getContextPath()%>/json/addkv.action",
data:$("#form1").serialize(),
success: function(msg){
alert( "返回码: " + msg.resultCode );
}
});
})
后台controller
@RequestMapping("/addkv")
public @ResponseBody ResultMsg addkv(TabClass tabClass) {
ResultMsg rm = new ResultMsg();
rm.setResultCode(0);
rm.setErrorMsg("添加成功");
return rm;
}
第2节 学生练习上面的程序
第3节 请求响应都是json
后台关键点:@RequestBody @ResponseBody
@RequestBody 用户前台输入json形式------->后台自动转换成java对象形式
@ResponseBody 后台java代码返回对象形式---->自动给前台转换成json形式
代码需要变动的：除了需要加注解，其他的不用动。
1）新建addclass.jsp,并发送json形式的请求。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="<%=request.getContextPath()%>/js/jquery-1.11.2.min.js"></script>
<script src="<%=request.getContextPath()%>/js/myjquery.js"></script>
<script>
$(function(){
//为btn1绑定单击事件
$("#btn1").bind("click",function(){
// var id=$("#classId").val();
//var name=$("#className").val();
//发送ajax请求，请求后台进行添加
$.ajax({
type: "POST",
contentType:"application/json",//传递json时必填
url: "<%=request.getContextPath()%>/tclass/add2.action",
/* data: '{"classId":'+id+',"className":'+name+'}', */
/*JSON.stringify 把对象序列化成字符串
serializeObject是把form序列化成对象*/
data:JSON.stringify($("#form1").serializeObject()),
success: function(msg){
alert( "返回码: " + msg.resultCode );
}
});
})
})
</script>
</head>
<body>
<form id="form1" method="post">
编号： <input type="text" name="classId" id="classId"/><br>
名称： <input type="text" name="className" id="className" /><br>
<input type="button" id="btn1" value="来去都json"/>
</form>
</body>
</html>
2）其中的myjquery.js用于将form序列化成对象
jQuery.prototype.serializeObject=function(){
var obj=new Object();
$.each(this.serializeArray(),function(index,param){
if(!(param.name in obj)){
obj[param.name]=param.value;
}
});
return obj;
};
3）后台controller
@Controller
@RequestMapping("/tclass")
public class JsonController {
/*
* 收发都json
*/
@ResponseBody
@RequestMapping("/add2")
public ResultMsg add(@RequestBody TabClass tabClass){
ResultMsg rm=new ResultMsg();
rm.setResultCode(0);
rm.setErrorMsg("添加成功");
return rm;
}
}
网友评论