Jquery解析Json对象方法总结大全
把json字符串变为json对象的方法总结:
众所周知,在Js/Jquery中是可以使用json对象的,我们要想使用json对象,前提是要把接收到的json字符串转为json对象哦。
下面站长就为大家总结了Jquery解析json的常用方法,希望对大家有帮助
本章方法讲解:不明白的地方,加群@群主即可
1,Jquery发送Post/Get请求,直接解析Json数据(json对象)
2,用eval解析json字符串对象
<!DOCTYPE html> <html> <head> <title>Jquery解析Json对象-Jsons.cn</title> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script> /* 把json字符串变为json对象的方法总结: 众所周知,在Js/Jquery中是可以使用json对象的,我们要想使用json对象, 前提是要把接收到的json字符串转为json对象哦。 下面站长就为大家总结了Jquery解析json的常用方法,希望对大家有帮助 本章方法讲解:不明白的地方,加群@群主即可 1,Jquery发送Post/Get请求,直接解析Json数据(json对象) 2,用eval解析json字符串对象 3,用JSON.parse 解析json对象 */</script> </head> <body> <script type="text/javascript"> //以下结果,请在console控制台中查看(F12或者审查元素,即可进入Console控制台) //第一种用法:Jquery接收Post/Get返回值,解析Json数据 //($.post,$.get,$.getJSON,$.ajax等等 解析json的原理都一样) $.post('你的URL', { action: 'GetList' }, function (data) { //此post请求为异步,上面是模拟的测试地址,正式使用时,请换成自己的接口地址 //为了方便,在这里我就直接模拟出json对象数据,直接赋值咯(小盆友不要学我懒省事,哈哈) data = { "Name": "Json在线解析", "ProUrl": "www.yunjson.com", "SiteID": 1472222, "SiteLink": "官方QQ群:308250404", "SiteInfo": "Json在线工具(http://www.yunjson.com),Json学习资料专题模块,只为你提供最好的Json学习资料,感谢你的支持" }; if (data) { //接收数据成功,开始处理json对象(此时data就是接收到的json对象) //现在我们可以得到json数据中,我们需要的某些字段值了 //为了方便查看,直接在控制台中打印出来咯 console.log(data.Name); console.log(data.ProUrl); console.log(data.SiteID); console.log(data.SiteLink); console.log(data.SiteInfo); } }, 'json'); //PS:以上请求中解析json的操作原理,可以简化的表示为以下方法 //定义一个json对象,然后,直接取值(对象.方法名) var data = { "Name": "Json在线解析", "ProUrl": "www.yunjson.com", "SiteID": 1472222, "SiteLink": "官方QQ群:308250404", "SiteInfo": "Json在线工具(http://www.yunjson.com),Json学习资料专题模块,只为你提供最好的Json学习资料,感谢你的支持" }; console.log(data); console.log("第一种用法:Jquery用Post/Get调用Json数据"); console.log("Name:--" data.Name); console.log("ProUrl:--" data.ProUrl); console.log("SiteID:--" data.SiteID); console.log("SiteLink:--" data.SiteLink); console.log("SiteInfo:--" data.SiteInfo); console.log("\r\n-------------------------我是第一和二的方法分割线哦-----------------------------------------------------\r\n"); // ------------------------------我是第一和二的方法分割线哦---------------------------------------------------------- //第二种用法:用eval解析json对象(需要引用jquery插件) var jsonstr = '{ "Name": "Json在线解析", "ProUrl": "www.yunjson.com", "SiteID": 1472222, "SiteLink": "官方QQ群:308250404", "SiteInfo": "Json在线工具(http://www.yunjson.com),Json学习资料专题模块,只为你提供最好的Json学习资料,感谢你的支持" }'; evalfun(jsonstr) function evalfun(jsonstr) { var jsoninfo = eval('(' jsonstr ')'); //此时为json对象,下面可直接调用 console.log(jsoninfo); console.log("第二种用法:用eval解析json对象,结果值如下"); console.log("Name:--" jsoninfo.Name); console.log("ProUrl:--" jsoninfo.ProUrl); console.log("SiteID:--" jsoninfo.SiteID); console.log("SiteLink:--" jsoninfo.SiteLink); console.log("SiteInfo:--" jsoninfo.SiteInfo); } console.log("\r\n-------------------------我是第二和三的方法分割线哦-----------------------------------------------------\r\n"); // ------------------------------我是第二和三的方法分割线哦---------------------------------------------------------- //第三种用法:使用JSON.parse 解析json对象(需要引用jquery插件) var jsonstr = '{ "Name": "Json在线解析", "ProUrl": "www.yunjson.com", "SiteID": 1472222, "SiteLink": "官方QQ群:308250404", "SiteInfo": "Json在线工具(http://www.yunjson.com),Json学习资料专题模块,只为你提供最好的Json学习资料,感谢你的支持" }'; jsonparse(jsonstr); function jsonparse(jsonstr) { var jsonrest = JSON.parse(jsonstr); //此时为json对象,下面可直接调用 console.log(jsonrest); console.log("第三种方法:使用JSON.parse 解析json对象"); console.log("Name:--" jsonrest.Name); console.log("ProUrl:--" jsonrest.ProUrl); console.log("SiteID:--" jsonrest.SiteID); console.log("SiteLink:--" jsonrest.SiteLink); console.log("SiteInfo:--" jsonrest.SiteInfo); } </script> </body> </html>
原文链接:Jquery解析Json对象方法总结大全