jQuery怎么解析Json字符串(Json格式Json对象)
json数据是我们常⽤的⼀种⼩型的数据实时交换的⼀个东西,他可以利⽤jquery或js进⾏解析,下⾯我来介绍jquery解析json字符串⽅法。
我们先以解析上例中的comments对象的JSON数据为例,然后再⼩结jQuery中解析JSON数据的⽅法。
上例中得到的JSON数据如下,是⼀个嵌套JSON:
{
"comments": [
{
"content": "很不错嘛",
"id": 1,
"nickname": "纳尼"
},
{
"content": "哟西哟西",
"id": 2,
"nickname": "⼩强"
}
]
}
获取JSON数据,在jQuery中有⼀个简单的⽅法$.getJSON()可以实现。
下⾯引⽤的是官⽅API对$.getJSON()的说明:
urlA string containing the URL to which the request is sent.
dataA map or string that is sent to the server with the request.
success(data, textStatus, jqXHR)A callback function that is executed if the request succeeds.
回调函数中接受三个参数,第⼀个书返回的数据,第⼆个是状态,第三个是jQuery的XMLHttpRequest,我们只使⽤到第⼀个参数。
$.each()是⽤来在回调函数中解析JSON数据的⽅法,下⾯是官⽅⽂档:
jQuery.each( collection, callback(indexInArray, valueOfElement) )
collectionThe object or array to iterate over.
callback(indexInArray, valueOfElement)The function that will be executed on every object.
$.each()⽅法接受两个参数,第⼀个是需要遍历的对象集合(JSON对象集合),第⼆个是⽤来遍历的⽅法,这个⽅法⼜接受两个参数,第⼀个是遍历的index,第⼆个是当前遍历的值。哈哈,有了$.each()⽅法JSON的解析就迎刃⽽解咯。(*^__^*) 嘻嘻……
function loadInfo() {
$.getJSON("loadInfo", function(data) {
$("#info").html("");//清空info内容
$.each(dataments, function(i, item) {
$("#info").append(
"<div>" + item.id + "</div>" +
"<div>" + item.nickname + "</div>" +
"<div>" + t + "</div><hr/>");
});
});
}
正如上⾯,loadinfo是请求的地址,function(data){...}就是在请求成功后的回调函数,data封装了返回
的JSON对象,在下⾯的$.each(dataments,function(i,item){...})⽅法中dataments直接到达JSON数据内包含的JSON数组:
[
{
"content": "很不错嘛",
"id": 1,
"nickname": "纳尼"
},
{
"content": "哟西哟西",
"id": 2,
"nickname": "⼩强"
}
]
$.each()⽅法中的function就是对这个数组进⾏遍历,再通过操作DOM插⼊到合适的地⽅的。在遍历的过程中,我们可以很⽅便的访问当前遍历index(代码中的”i“)和当前遍历的值(代码中的”item“)。
上例的运⾏结果如下:
jquery源码在线如果返回的JSON数据⽐较复杂,则只需多些$.each()进⾏遍历即可,嘿嘿。例如如下JSON数据:
{
"comments": [
{
"content": "很不错嘛",
"id": 1,
"nickname": "纳尼"
},
{
"content": "哟西哟西",
"id": 2,
"nickname": "⼩强"
}
]
,
"content": "你是⽊头⼈,哈哈。",
"infomap": {
"性别": "男",
"职业": "程序员",
"博客": "wwwblogs/codeplus/"
},
"title": "123⽊头⼈"
}
js如下:
function loadInfo() {
$.getJSON("loadInfo", function(data) {
$("#title").append(data.title+"<hr/>");
$("#content").t+"<hr/>");
//jquery解析map数据
$.each(data.infomap,function(key,value){
$("#mapinfo").append(key+"----"+value+"<br/><hr/>");
});
//解析数组
$.each(dataments, function(i, item) {
$("#info").append(
"<div>" + item.id + "</div>" +
"<div>" + item.nickname + "</div>" +
"<div>" + t + "</div><hr/>");
});
});
}
值得注意的是,$.each()遍历Map的时候,function()中的参数是key和value,⼗分⽅便。
上例的运⾏效果:
jQuery很强⼤,so...更多的了解还得参考⽂档,(ˇˍˇ)想~
下⾯是其他⽹友的补充:
⼀、jQuery解析Json数据格式:
使⽤这种⽅法,你必须在Ajax请求中设置参数:
1 dataType: "json"
获取通过回调函数返回的数据并解析得到我们想要的值,看源码:
jQuery.ajax({
url: full_url,
dataType: "json",
success: function(results) {
alert(result.name);
} });
通常情况下,你可以从后台返回JSON数据,前台就交给jQuery啦,哈哈!!
jquery异步请求将type(⼀般为这个配置属性)设为“json”,或者利⽤$.getJSON()⽅法获得服务器返回,那么就不
需要eval()⽅法了,因为这时候得到的结果已经是json对象了,只需直接调⽤该对象即可,这⾥以$.getJSON⽅法为例说
例1
代码如下:
var data="
{
root:
[
{name:'1',value:'0'},
{name:'6101',value:'北京市'},
{name:'6102',value:'天津市'},
{name:'6103',value:'上海市'},
{name:'6104',value:'重庆市'},
{name:'6105',value:'渭南市'},
{name:'6106',value:'延安市'},
{name:'6107',value:'汉中市'},
{name:'6108',value:'榆林市'},
{name:'6109',value:'安康市'},
{name:'6110',value:'商洛市'}
]
}";
jquery
$.getJSON("sanicblogs/",{param:"sanic"},function(data){
/
/此处返回的data已经是json对象
//以下其他操作同第⼀种情况
$.,function(idx,item){
if(idx==0){
return true;//同countinue,返回false同break
}
alert("name:"+item.name+",value:"+item.value);
});
});
⼆、jQuery解析Json对象:
jQuery提供了另⼀种⽅法“parseJSON”,这需要⼀个标准的JSON字符串,并返回⽣成的JavaScript对象。让我们来看看语法:
data = $.parseJSON(string);
看看它是如何运⽤的到实际开发中的:
jQuery.ajax({
url: dataURL, success: function(results) {
var parsedJson = jQuery.parseJSON(results);
alert(parsedJson.name);
}
});
PS:关于json操作,这⾥再为⼤家推荐⼏款⽐较实⽤的json在线⼯具供⼤家参考使⽤:

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。