简单的后端传送json格式至前端正确处理方法
最近做项目用echarts时涉及到了从后台返回json数据给前台,所以就稍微学了一下,做些记录。
其中json的语法规则如下:
数据在名称/值对中 "key":"value"
数据由逗号分隔
{} 保存对象
[] 保存数组
引用某位大佬说的话:
Json是一种文本字符串!被存储在responseText属性中,而读取json数据可以使用javascript的eval函数来解析json。
json对象:
//样例1:对象类型
var data1 = {"name":"Alice","age":13,"measurements":new int[]{60,70,70}};
json 数组:
//样例2:集合类型
var data2 = [{"name":"Paul"},{"age":12},{"measurements":new int[]{30,40,50}}];
进行测试:
样例1:
后端代码:
Map
data1.put("name", "Alice");
data1.put("age", 12);
data1.put("measurements", new int[] { 60, 70, 70 });
JSONObject object = JSONObject.fromObject(data1); //创建Json对象
//将json对象转化为字符串在终端输出
System.out.print(object.toString());
//把json数据返回给浏览器:
resp.getWriter().write(object.toString());
终端输出:
{"name":"Alice","age":12,"measurements":[60,70,70]}
前端代码:
$.ajax({
url:"url",
dataType:"json",
type:"get",
data:{
},
contentType:"application/json;charset=utf-8",
success:function(resule){
var jsonobj= eval(resule);
var test = JSON.stringify(jsonobj)//将json对象转化成字符串
alert("str->样例1:\n"+test);
alert("直接->jsonobj.name:\n"+jsonobj.name);
},
error:function(){
alert("Error");
}
});
网页弹窗提示:
样例2:
后端代码:
HashMap
List
map = new HashMap
map.put("name", "Paul");
data2.add(map);
map = new HashMap
map.put("age", 12);
data2.add(map);
map = new HashMap
map.put("measurements", new int[] { 30, 40, 50 });
data2.add(map);
JSONArray object2 = JSONArray.fromObject(data2); //创建Json对象
//将json对象转化为字符串在终端输出
System.out.print(object2.toString());
//把json数据返回给浏览器:
resp.getWriter().write(object2.toString());
终端输出:
[{"name":"Paul"},{"age":12},{"measurements":[30,40,50]}]
前端代码:
$.ajax({
url:"url",
dataType:"json",
type:"get",
data:{
},
contentType:"application/json;charset=utf-8",
success:function(resule){
var jsonobj= eval(resule);
var test = JSON.stringify(jsonobj)//将json对象转化成字符串
alert("str->样例2:\n"+test);
alert("直接->jsonobj[0].name:\n"+jsonobj[0].name);
},
error:function(){
alert("Error");
}
});
网页弹窗提示:
总结:
如果是需要传输类似于样例1中的对象类型则需要在后端使用JSONObject.fromObject()方法 ,值得一提的是,使用JSONObject类时需要导入
import net.sf.json.JSONObject;
如果是需要传输类似于样例2中的集合类型则需要在后端使用JSONArray.fromObject()方法 ,值得一提的是,使用JSONArray类时需要导入
import net.sf.json.JSONArray;
此外,如果是需要在jsp页面中使用传输过来的结果的话,是不需要用JSON.stringify()将传输结果转换成字符串的,这里是为了演示方便。
可以:对象直接使用键名调用,变量名.键名;集合用法类似数组,变量名.[下标].键名
正如我一开始就提到的,我只是因为有需要就学了点皮毛,必然会有许多瑕疵 😦