JSON(JavaScript Object Notation)은 경량 데이터 교환 형식입니다. ECMAScript의 하위 집합을 기반으로 합니다. JSON은 완전히 언어 독립적인 텍스트 형식을 사용하지만 C 언어 계열(C, C++, C#, Java, JavaScript, Perl, Python 등 포함)과 유사한 규칙도 사용합니다. 이러한 속성은 JSON을 이상적인 데이터 교환 언어로 만듭니다. 사람이 읽고 쓰기가 쉽고 기계가 구문 분석하고 생성하기도 쉽습니다(일반적으로 네트워크 전송 속도를 높이는 데 사용됨).
1. JSON 문자열을 JSON 객체로 변환: eval() 및 JSON.parse
예: json 문자열:
var data = '{ "name": "dran", "sex": "man" }'; var obj = eval("("+data+")"); 或者 var obj = JSON.parse(data);
그러면 다음과 같이 읽을 수 있습니다: Alert(obj.name + obj.sex);
팁: 왜 ("("+data+")를 추가해야 합니까? 여기 평가? ");모직 천?
그 이유는 평가 자체의 문제에 있습니다. json은 "{}"으로 시작하고 끝나기 때문에 JS에서는 명령문 블록으로 처리되므로 강제로 표현식으로 변환해야 합니다.
괄호를 추가하는 목적은 JavaScript 코드를 명령문으로 실행하는 대신 eval 함수가 JavaScript 코드 처리 시 괄호 안의 표현식을 객체로 변환하도록 강제하는 것입니다. 예를 들어 객체 리터럴 {}을 사용하면 외부 괄호가 추가되지 않으면 eval은 중괄호를 JavaScript 코드 블록의 시작 및 끝 표시로 인식하고 {}는 빈 문
을 실행하는 것으로 간주됩니다.
2. 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 지원을 제공하지 않는 브라우저의 경우 JSON 변환 기능을 구현하기 위해 json2.js 스크립트를 도입할 수 있습니다. json2.js 스크립트는 https://github.com/douglascrockford/JSON-js/blob/master/json2.js 페이지에서 다운로드할 수 있습니다
AJAX가 프런트엔드와 백엔드를 실현할 때- JSON의 데이터 형식은 JSON에 대한 엄격한 코드 사양을 가지고 있습니다. 형식에 문제가 있으면 해당 효과를 표시할 수 없으며 콘솔에 오류가 보고되지 않습니다
추가: ajax는 json 데이터를 읽습니다. Spliced 디스플레이:
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='<div style="display:block">'+ '<div>姓名:'+arr1[i].name+' 性别:'+arr1[i].sex+'</div>'+ '<div>学校:'+arr2[j].name+'</div>'+ '<div>地点:'+arr2[j].area+'</div>'+ //'<div>喜好:'+arr1[i].like+'</div>'+ //全显示 //'<div>喜好:'+arr1[i].like[1]+'</div>'+ //单独设置 //'<div>喜好:'+arr1[i].like[0]+'</div>'+ '</div>'; } $(".result").append(str); } //分层显示 //var str = ""; // var str1 = ""; // if (arr1 != null) { // for (var i = 0; i < arr1.length; i++) { //这里面都是创建并赋值 // str += "<span>" + arr1[i].name + "</span><span>" + arr1[i].sex + "</span><br>"; // } // $(".result").html(str); // } // if (arr2 != null) { // for (var j = 0; j < arr2.length; j++) { // str1 += "<span>" + arr2[j].name + "</span><span>" + arr2[j].area+ "</span><br>"; // } // $(".result2").html(str1); // } }, error:function(data){ alert("error"); } }) <div class="result">frist:</div> <div class="result2">second:</div> for
2. 각 루프는 $.each 메서드를 사용하여 반환된 데이터 날짜를 탐색하고 삽입합니다. 클래스 .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='<div style="display:block">'+ '<div>姓名:'+item.name+' 性别:'+item.sex+'</div>'+ '<div>like:'+item.like+'</div>'+ '</div>'; $(".result").append(str); }) }, error:function(data){ alert("error"); } }) <div class="result"></div> 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="爱我中华,虽远必诛