json在前后端数据交互中的应用
一.什么是json?
json本来是javascript里的内容,有时后端要传各种各样的数据格式来适应前端,所以需要用到json来转换,用它来表示各种各样复杂的数据,如对象,数组,集合,以及集合的集合等数据。
先来了解json是什么,json是一种轻量级的前端后端以及网络传输的数据交换格式,就是一串字符串,只不过元素会使用特定的符号标注。 {} 双括号表示对象,[] 中括号表示数组,”” 双引号内是属性或值,: 冒号表示后者是前者的值(这个值可以是字符串、数字、也可以是另一个数组或对象)。也就是说在后端可以把一个字符串,然后通过json来转换成特定的字符串传到前端去。
二.为什么要用json?
1.数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小,其可读性也不错,基本具备了结构化数据的性质。
2.易于解析这种语言, 客户端JavaScript可以简单的通过eval()进行JSON数据的解析,通过遍历数组以及访问对象属性来获取数据,
3.因为JSON格式能够直接为服务器端代码使用, 大大简化了服务器端和客户端的代码开发量, 且易于维护,语言无关,任何语言都能轻松搞它,类型安全,值是有类型的,比如整数、字符串、布尔等。
三.一些常见的json格式
1.一个JSON对象——JSONObject
简单点的:var json={"name":"张三" , "age":18 };
复杂一点的:var json={"name":"张三", "age"=18,"address":{"street":"湖南", "city":长沙","country":"中国"}};
2.一个JSON数组——JSONArray
简单点的:
var json=[{"name":"张三" , "age":18 },{"name":"李四" , "age":20 }];
复杂一点的:
[
{"name":"张三", "age"=18, "address":{"street":"湖南", "city":"长沙","country":"中国"}},
{"name":"李四", "age"=20, "address":{"street":"湖南", "city":"张家界","country":"中国"}}
]
3.还有一种结构
var json={"abc":[{"name":"txt1"},{"name","txt2"}]};
//这里的json.abc是一个数组,数组是由2个子json组成的
遍历(后面不在讲这种结构)
for(var i=0;i<json1.abc.length;i++){alert(json1.abc[i].name);}
里面的是一个对象{},如果是多个对象,则用逗号间隔,即{},{},这样就组成了一个对象序列,为了辨别开始和结束,则需要加上[]才能进行传递,则实际传递的形式应该是[{},{}],如果只要传递一个对象,则{}的形式就可以了。
四.json在前端(js)应用
后端将数据处理成json格式,前端就通过ajax来接收数据,并eval()或者json.prase(data)解析,循环遍历,展现在页面上。
$ .ajax({
url : "myfileAction",
dataType : "json",
type : "post",
success : function(data) {
}
});
第一步,接收数据
用ajax来接收后端发来的数据,简单说下ajax,ajax是一种用于快速创建动态网页的技术。通过在后台与服务器进行少量数据交换,ajax就可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页(不使用ajax)如果需要更新内容,必须重载整个网页面。
type: “POST”, //请求的方式,也有get请求
url: “myfileAction”, //请求地址,后台提供的,填写具体action,也就是struts.xml文件中action名字。
data: {name:name},//data是传给后台的json字段,后台需要哪些就传入哪些,这里是接收数据,所以可以不用写。
dataType: “json”, //json格式,后台返回的数据为json格式的。
第二步,解析数据
前后台传输的时候其实是字符串,解析是把json字符串重新变成json类型的对象。
json字符串转换成json对象
var obj = eval('(' + data + ')');
或者 var obj = JSON.parse(data);
区别:eval方法不会去检查给的字符串时候符合json的格式,同时如果给的字符串中存在js代码eval也会一并执行。相比而言eval()不安全,建议用JSON.parse。
json对象转为json字符串
var name = JSON.stringify(person);
前端传入后台的应该是一个json格式的字符串,而不是一个json对象,所以这个也有用的。
讲到这里简单提下发送数据吧。
<script type="text/javascript">
$(document).ready(function(){
var saveDataAry=[];
var data1={"userName":"zhangsan","address":"bj"};
var data2={"userName":"lisi","address":"nj"};
saveDataAry.push(data1);
saveDataAry.push(data2);
$.ajax({
type:"POST",
url:"user/saveUser",
dataType:"json",
contentType:"application/json",
data:JSON.stringify(saveData),
success:function(data){
}
});
});
</script>
ajax请求的时候也要指定dataType:“json”,contentType:”application/json” 这样就可以轻易的将一个对象或者List传到后端。
第三步,数据遍历
可以通过jQuery的$.each()方法遍历输出,举个例子
var arr = [{ name: "john", lang: "js" },{ name: "张三", lang: "ext" }];
$.each( arr, function(index, content)
{
alert( "the man's no. is: " + index + ",and " + content.name + " is learning " + content.lang );
});
如果声明的是字符串,var arr=’[]’这样类型,那么遍历的时候应该先用json.parse()或者jquery的方法$.parseJSON将字符串转化为对象。
还有一种是for循环遍历
for(var i=0; i<arr.length; i++)
{
alert(arr[i].name+" " + arr[i].value)
}
//取arr数组里一个叫name的值,比如上面name后面值是张三,就取出张三
五.json在后端上的应用
在后端action里要导入 net.sf.json.JSONObject这个包。
第一步,有几种后端数据封装成json数据格式
1.List集合转换成json代码
List list = new ArrayList();
list.add( “first” );
list.add( “second” );
JSONArray jsonArray = JSONArray.fromObject( list );
2. Map集合转换成json代码
Map map = new HashMap();
map.put(“name”, “json”);
map.put(“bool”, Boolean.TRUE);
map.put(“int”, new Integer(1));
map.put(“arr”, new String[] { “a”, “b” });
map.put(“func”, “function(i){ return this.arr[i]; }”);
JSONObject json = JSONObject.fromObject(map);
3.Bean转换成json代码
JSONObject jsonObject = JSONObject.fromObject(new JsonBean());
4. 数组转换成json代码
boolean[] boolArray = new boolean[] { true, false, true };
JSONArray jsonArray1 = JSONArray.fromObject(boolArray);
5. 一般数据转换成json代码
JSONArray jsonArray =JSONArray.fromObject([‘json’,’is’,’easy’]” );
6.用json put方法
JSONObject json=new JSONObject();
json.put(“name”, “张三”);
json.put(“age”, 18);
第二步,给你一个Struts 2的struts.xml中配置json类型result
<package name="json" extends="json-default" >
<action name="***Action"
class="action.UserAction" method="add">
<result type="json">
<param name="root">result</param>
</result>
</action>
</package>
<param>
这个标签是设置参数的,对于java程序来说,这个标签就相当于定义一个root 变量,将其赋值为map ,前台可以获取使用root这个参数值。
所以action里要有get,setresult方法,把json字符串值给reslut setResult(json.toString());
接收前端提交的数据
String data = request.getParameter("data");
JSONArray json=JSONArray.fromObject(data);
JSONObject jsonOne;
Map<String,String> map=null;
for(int i=0;i<json.size();i++){
updataMap = new HashMap<String,String>();
jsonOne = json.getJSONObject(i);
map.put("name", (String) jsonOne.get("name"));
map.put("age", (String) jsonOne.get("age"));
}
更多推荐
所有评论(0)