SpringBoot中前后端数据交互 json 格式
程序员文章站
2022-03-16 08:54:55
...
//前端使用jquery封装的ajax技术把封装好的json数据传输给后端
//而在springboot项目中后端自动配置使用了google的jackson把传递给前端的数据自动转换为json格式,当然我们也可以不用默认,自定义设置
$.ajax(
{
url:"http://www.microsoft.com", //请求的url地址
dataType:"json", //返回格式为json
async:true,//请求是否异步,默认为异步,这也是ajax重要特性
data:{"id":"value"}, //参数值
type:"POST", //请求方式
contentType: 'application/json;charset=utf-8' ,指定数据是以Json的形式传递
beforeSend:function(){
//请求前的处理
},
success:function(req){
//请求成功时处理
},
complete:function(){
//请求完成的处理
},
error:function(){
//请求出错处理
}
}
);
//前端定义一个数组,把他转换为 json 格式
function arr(){
//定义一个数组
var cons = new Array(3);
for(var i = 0;i<3;i++){
var con = {};
con["id"] = 0;
con["name"] = '张三';
con["job"] = '学生';
cons[i] = con;
}
var json = JSON.stringify(cons);
alert("json数组为:"+json);
}
//前端定义一个对象把他转化为json格式
function demo(){
var con = {};
con["id"] = 0;
con["name"] = '张三';
con["job"] = '学生';
var json = JSON.stringify(con);
alert("封装成json数据为:"+json);
}
原理讲解///
在数据传输过程中,JSON是以文本、即字符串的形式传递的,而JavaScript操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。
JSON字符串:var str = "{name:'xmt',sex:'woman'}";
JSON对象:var str = {name:'xmt',sex:'woman'};
JSON字符串转化为JSON对象:var obj = JSON.parse(str);
JSON对象转化为JSON字符串:var str = JSON.stringify(obj);
在整理博客的时候突发奇想一个问题,前端传输的是 JSON 对象,或者 JSON 字符串到后端有什么区别呢???存取有什么不同???
经过测试我发现一般我们进行前后端数据交互时都是用 json字符串 形式进行交互,把json字符串传给后端,后端再应用jackson或者fastjson等json转换工具,把json字符串转换为相对于的json对象
经过接近一整天的测试我了解到,前端通过ajax传值到后端的话,一般都是通过json字符串的形式进行传递,并且contentType参数绝对不能设置为application/json,不然后端是取不到这个参数的,我们只能通过在后端用fastjson来转换json字符串为对应的json对象,在springboot中返回给ajax的data数据只需要通过方法的@ResponseBody注解进行返回即可,返回的数据springboot会自己转化为json的格式十分方便.
<button id="ibutton">提交</button>
<div id="content"></div>
<script type="text/javascript">
var studentList = [];
for (var i = 0; i < 3; i++) {
var student = {};
student["name"] = 'yuqiliu';
student["sex"] = 'false';
student["age"] = '20';
studentList.push(student);
}
$("#ibutton").click(function () {
$.ajax(
{
url: "/index2",
data: {
'studentListStr': JSON.stringify(studentList)
},
dataType: "json",
type: "POST",
success: function (data) {
$("#content").html(
"<table>"+
"<th>" +
"<td>姓名</td>"+
"<td>年龄</td>"+
"<td>性别</td>"+
"</th>"+
"<tr>" +
"<td>"+data[0].name+"</td>"+
"<td>"+data[0].age+"</td>"+
"<td>"+(data[0].sex)+"</td>"+
"</tr>"+
"<tr>" +
"<td>"+data[1].name+"</td>"+
"<td>"+data[1].age+"</td>"+
"<td>"+data[1].sex+"</td>"+
"</tr>"+
"<tr>" +
"<td>"+data[2].name+"</td>"+
"<td>"+data[2].age+"</td>"+
"<td>"+data[2].sex+"</td>"+
"</tr>"+
"</table>"
)
console.log(data[0].name);
}
}
);
});
</script>
fastjson对象,JSON,字符串,map之间的互转
1.对象与字符串之间的互转
将对象转换成为字符串
String str = JSON.toJSONString(infoDo);
字符串转换成为对象
InfoDo infoDo = JSON.parseObject(strInfoDo, InfoDo.class);
2.对象集合与字符串之间的互转
将对象集合转换成为字符串
String users = JSON.toJSONString(users);
将字符串转换成为对象集合
List<User> userList = JSON.parseArray(userStr, User.class);
3.字符串互转JSONObject
String 转 Json对象
JSONObject jsonObject = JSONObject.parseObject(jsonString);
json对象转string
JSONObject jsonObject = JSONObject.parseObject(str);//json对象转字符串
String jsonString = jsonObject.toJSONString();
4.map与字符串之间互转
//字符串转map
JSONObject jsonObject = JSONObject.parseObject(str);
Map<String,Object> map = (Map<String,Object>)jsonObject;// //json对象转Map
//map转字符串
String jsonString = JSON.toJSONString(map);
5.Map 转 Json对象
//map转json对象
Map<String,Object> map = new HashMap<>();
map.put("age", 24);
map.put("name", "cool_summer_moon");
JSONObject json = new JSONObject(map);
//json对象转Map
Map<String,Object> map = (Map<String,Object>)jsonObject;