Json 객체와 문자열을 서로 변환합니다. json 데이터 접합 및 JSON 사용에 대한 자세한 소개(요약)

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 지원을 제공하지 않는 브라우저의 경우 json2.js 스크립트를 도입하여 JSON 변환 기능을 구현할 수 있습니다. json2.js 스크립트는 https://github.com/douglascrockford/JSON-js/blob/master/json2.js 페이지에서 다운로드할 수 있습니다

AJAX가 프런트엔드와 백엔드를 실현할 때- JSON의 데이터 형식은 JSON에 대한 엄격한 코드 사양을 가지고 있습니다. 형식에 문제가 있으면 해당 효과를 표시할 수 없으며 콘솔에 오류가 보고되지 않습니다

추가: ajax는 json 데이터를 읽습니다. Splicing 표시:

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=&#39;<div style="display:block">&#39;+
&#39;<div>姓名：&#39;+arr1[i].name+&#39; 性别：&#39;+arr1[i].sex+&#39;</div>&#39;+
&#39;<div>学校:&#39;+arr2[j].name+&#39;</div>&#39;+
&#39;<div>地点:&#39;+arr2[j].area+&#39;</div>&#39;+
//&#39;<div>喜好:&#39;+arr1[i].like+&#39;</div>&#39;+ //全显示
//&#39;<div>喜好:&#39;+arr1[i].like[1]+&#39;</div>&#39;+ //单独设置
//&#39;<div>喜好:&#39;+arr1[i].like[0]+&#39;</div>&#39;+
&#39;</div>&#39;;
}
$(".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=&#39;<div style="display:block">&#39;+
&#39;<div>姓名：&#39;+item.name+&#39; 性别：&#39;+item.sex+&#39;</div>&#39;+
&#39;<div>like:&#39;+item.like+&#39;</div>&#39;+
&#39;</div>&#39;;
$(".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="爱我中华，虽远必诛

위는 편집자가 제공한 것입니다. 소개하신 Json 객체 및 문자열 변환, json 데이터 스플라이싱 및 JSON 사용법이 자세히 소개되어 있습니다(요약). 질문이 있으시면 메시지를 남겨주세요. 그러면 편집자가 제때에 답변해 드릴 것입니다. 또한 PHP 중국어 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

Json 객체와 문자열을 서로 변환하는 방법, json 데이터 스플라이싱 및 JSON 사용 방법(요약)에 대한 자세한 내용은 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!