说实话,有点怕使用JSON,可能是因为比较少用的原因,也没有重点学习过这方面的知识,JavaScript的视频学习到了事件了。快要进入实战阶段了。一方面积累基础,一方面学习重点知识。
JSON数组格式是比较复杂的一种类型,我们可以通过each来循环遍历取出你所需要的东西。下面举一个例子,来源于stackoverflow.
{ "justIn": [
{ "textId": "123", "text": "Hello", "textType": "Greeting" },
{ "textId": "514", "text":"What's up?", "textType": "Question" },
{ "textId": "122", "text":"Come over here", "textType": "Order" }
],
"recent": [
{ "textId": "1255", "text": "Hello", "textType": "Greeting" },
{ "textId": "6564", "text":"What's up?", "textType": "Question" },
{ "textId": "0192", "text":"Come over here", "textType": "Order" }
],
"old": [
{ "textId": "5213", "text": "Hello", "textType": "Greeting" },
{ "textId": "9758", "text":"What's up?", "textType": "Question" },
{ "textId": "7655", "text":"Come over here", "textType": "Order" }
]
}
需求:需要将里面有用的内容插入到一个id为content的盒子里面。我们可以通过jquery的each方面来遍历。测试可以使用这样子的代码:
$.getJSON("data.php", function(data){
$.each(data, function(k, v) {
alert(k + ' ' + v);
$.each(v, function(k1, v1) {
alert(k1 + ' ' + v1);
});
});
});
输出每个数组包含的内容,我们使用一个有序列表输出内容来:
var that=$("#content"), _html='';
$.each(data, function(k, v) {
// alert(k + ' ' + v);
_html +='<ol><h2>'+k+'</h2>';
$.each(v, function(k1, v1) {
// alert(k1 + ' ' + v1);
$.each(v1,function(k2,v2){
// alert(k2+ " " +v2);
_html +='<li>'+k2+':'+v2+'</li>';
})
});
_html +='</ol>';
});
that.append(_html);
结果输出的内容如下:
<div id="contentHere">
<ol>
<h2>justIn</h2>
<li>textId:123</li>
<li>text:Hello</li>
<li>textType:Greeting</li>
<li>textId:514</li>
<li>text:What's up?</li>
<li>textType:Question</li>
<li>textId:122</li>
<li>text:Come over here</li>
<li>textType:Order</li>
</ol>
<ol>
<h2>recent</h2>
<li>textId:1255</li>
<li>text:Hello</li>
<li>textType:Greeting</li>
<li>textId:6564</li>
<li>text:What's up?</li>
<li>textType:Question</li>
<li>textId:0192</li>
<li>text:Come over here</li>
<li>textType:Order</li>
</ol>
<ol>
<h2>old</h2>
<li>textId:5213</li>
<li>text:Hello</li>
<li>textType:Greeting</li>
<li>textId:9758</li>
<li>text:What's up?</li>
<li>textType:Question</li>
<li>textId:7655</li>
<li>text:Come over here</li>
<li>textType:Order</li>
</ol>
</div>
在上一篇文章介绍JSON中,我们了解到JSON也有字符串,如果需要使用JSON前,需要将其转换为JSON格式。
在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:
JSON字符串:
var str1 = ‘{ “name”: “cxh”, “sex”: “man” }’;
JSON对象:
var str2 = { “name”: “cxh”, “sex”: “man” };
一、JSON字符串转换为JSON对象
要运用上面的str1,必须运用下面的要领先转化为JSON对象:
//由JSON字符串转换为JSON对象
var obj = eval(‘(‘ + str + ‘)’);
或者
var obj = str.parseJSON(); //由JSON字符串转换为JSON对象
或者
var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
然后,就可以这样读取:
Alert(obj.name);
Alert(obj.sex);
特别留心:如果obj本来就是一个JSON对象,那么运用 eval()函数转换后(哪怕是多次转换)还是JSON对象,但是运用 parseJSON()函数处理后会有疑问(抛出语法异常)。
二、可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。
例如:
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
或者
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
alert(last);
留心:
上面的多个要领中,除了eval()函数是js自带的之外,其他的多个要领都来自json.js包。新版本的 JSON 修改了 API,将 JSON.stringify() 和 JSON.parse() 两个要领都注入到了 Javascript 的内建对象里面,前者变成了 Object.toJSONString(),而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领,则说明您的json包版本太低。
这个需要json-lib.jar包支持 该jar下载地址:点击下载
//JSON对象 JSONObject的使用 String str1 = "{ 'name': 'cxh', 'sex': '1' }"; JSONObject obj = JSONObject.fromObject(str1); String name = obj.getString("name"); //直接返回字符串型 cxh Object nameo = obj.get("name"); //直接返回对象型的cxh int age = obj.getInt("sex"); //直接返回int型的sex //JSON数组对象 JSONArray的运用 String jsonArrStr = "[{ 'name': 'cxh', 'sex': '1','website':'http://bejson.fuliqu.com' },{ 'name': '三少', 'sex': '1','website':'http://www.ij2ee.com' }]"; JSONArray array = JSONArray.fromObject(jsonArrStr); int size = array.size(); //获取JSON数组大小 JSONObject jo = array.getJSONObject(0);//取第一个JSON对象 for(int i=0;i<size;i++){ JSONObject jo1 = array.getJSONObject(i); System.out.println(jo1.getString("website")); //循环返回网址 } //序列化Bean对象为JSON对象 User user = new User(); user.setName("cxh"); user.setSex(1); user.setWebsite("http://bejson.fuliqu.com"); JSONObject jo2 = JSONObject.fromObject(user); System.out.println(jo2.toString()); //则会输出 { 'name': 'cxh', 'sex': '1','website':'http://bejson.fuliqu.com' }