web前端|js教程
Json
web前端-js教程
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。
会员管理系统 asp源码,ubuntu远程硬盘访问,随便更改tomcat端口号,反爬虫事件,php面试心得体会,seo专业工作lzw
A、JSON字符串转换为JSON对象: eval() 和 JSON.parse
给女友做的网站 源码,ubuntu内部网络,墙上爬虫是什么,php speedphp,seo学习周期lzw
eg- json字符串:
网狐6603棋牌源码,ubuntu 鼠标键盘,查看tomcat32位,淘宝爬虫 订单,php本地缓存变量,seo做的比较好的案例霸屏lzw
var data = { "name": "dran", "sex": "man" };var obj = eval("("+data+")"); 或者var obj = JSON.parse(data);
然后,就可以这样读取: alert(obj.name + obj.sex);
提示:为什么要 eval这里要添加 (“(“+data+”)”);呢?
原因在于:eval本身的问题。 由于json是以”{}”的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。
加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。举一个例子,例如对象字面量{},如若不加外层的括号,那么eval会将大括号识别为JavaScript代码块的开始和结束标记,那么{}将会被认为是执行了一句空语句
B、JSON对象转换为JSON字符串 : obj.toJSONString()或者全局方法JSON.stringify(obj) (obj代表json对象)
eg-json对象: var obj = { "name": "dran", "sex": "man" };var jstring = JSON.stringify(obj) ;// 建议用这个var jstring = obj.toJSONString(); //toJSONString()不是js原生的方法,需要引入相应的库或自己定义后才能用 (不习惯用)
然后,就可以这样读取: alert(jstring);
注意:
目前,Firefox、Opera、IE8以上版本也提供了本地JSON支持。其中,JSON解释器提供的函数有:JSON.parse、JSON.stringify。 对于那些并不提供本地JSON支持的浏览器可以引入脚本json2.js,来实现JSON转换功能。json2.js脚本可到/douglascrockford/JSON-js/blob/master/json2.js页面下载
在AJAX实现前后台数据交互的时候,通常使用JSON的数据格式,对于JSON来说,有严格的代码规范,一旦格式出问题,就无法显示出相应效果,同时还不在控制台报错
补充: ajax读取json数据拼接显示:
json文件:
{"first":[{"name":"张三","sex":"男","like":["吃饭","睡觉","打豆豆"]},{"name":"李四","sex":"男"},{"name":"王武","sex":"男"},{"name":"李梅","sex":"女"},],"second":[{"name":"上海大学","area":"上海"},{"name":"武汉大学","area":"武汉"},{"name":"北京大学","area":"北京"},{"name":"山东大学","area":"山东"},]}
html和ajax代码
1、用for循环
$.ajax({url : "ceshi.json",type : "POST",dataType :"text", //浏览器把json文件当作文本文件 不然读取不出来 权宜之策就改成了text, 因为测试, json文件格式正确书写success: function(data) {var dataJson = eval("("+data+")"); // 将json字符串数据解析成对象var arr1 = dataJson.first;var arr2 = dataJson.second;//一栏显示 用for循环完成数组解析for(var i = 0; i<arr1.length; i++){for(var j = 0; j<arr2.length; j++){var str=
+
姓名:+arr1[i].name+ 性别:+arr1[i].sex+
+
学校:+arr2[j].name+
+
地点:+arr2[j].area+
+//
喜好:+arr1[i].like+
+ //全显示//
喜好:+arr1[i].like[1]+
+ //单独设置//
喜好:+arr1[i].like[0]+
+
;}$(".result").append(str);}//分层显示//var str = "";// var str1 = "";// if (arr1 != null) {// for (var i = 0; i < arr1.length; i++) { //这里面都是创建并赋值// str += "" + arr1[i].name + "" + arr1[i].sex + "
";// }// $(".result").html(str);// }// if (arr2 != null) {// for (var j = 0; j < arr2.length; j++) {// str1 += "" + arr2[j].name + "" + arr2[j].area+ "
";// }// $(".result2").html(str1);// }},error:function(data){alert("error");}})
frist:
second:
for
2、 each循环 使用$.each方法遍历返回的数据date,插入到class为 .result中
JSON:
[{"name":"张三","sex":"男","like":["吃饭","睡觉","打豆豆"]},{"name":"李四","sex":"男"},{"name":"王武","sex":"男"},{"name":"李梅","sex":"女"},]$.ajax({url : "ceshi.json",type : "POST",dataType :"text", //浏览器把json文件当作文本文件 不然读取不出来 权宜之策就改成了text, 因为测试, json文件格式正确书写success: function(data) {var dataJson = eval("("+data+")"); // 将json字符串数据解析成对象//each循环 使用$.each方法遍历返回的数据date,插入到class为 .result中 i 表示索引 item 信息值 对象$.each(dataJson,function(i,item){var str=
+
姓名:+item.name+ 性别:+item.sex+
+
like:+item.like+
+
;$(".result").append(str);})},error:function(data){alert("error");}})
each
PS:对于一般的js生成json对象,只需要将$.each()方法替换为for语句即可,其他不变
JSON 数据使用方法:
//json对象:var jsonObj= {"name":" 张三","sex":"男","age":26,};使用: jsonObj.name= "张三"jsonObj.age= "26"//json数组: []下标 从 0 开始var jsonArr =[{"name":"张三","sex":"男","like":["吃饭","睡觉","打豆豆"]},{"name":"李四","sex":"男"},{"name":"王武","sex":"男"},]使用: jsonArr[0].sex="男"jsonArr[1].name="李四"//多个数组: []下标 从 0 开始var options = {"city" :[{"name":"上海","area":"普陀区","option":"真北路","correct":"1"},{"name":"石家庄","area":"河北","option":"在北方","correct":"2"}],"world":[{"title":"美国","content":"好莱坞大片 科幻"},{"title":"中国","content":"爱我中华,虽远必诛"}]};options.city[0].area="普陀区"options.world[1].content="爱我中华,虽远必诛