집 > 기사 > 웹 프론트엔드 > Json 객체와 문자열을 서로 변환하는 단계에 대한 자세한 설명

Json 객체와 문자열을 서로 변환하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-04-25 13:47:112001검색

이번에는 Json 객체와 문자열을 서로 변환하는 단계에 대해 자세히 설명하겠습니다. Json 객체와 문자열을 서로 변환할 때 주의사항은 무엇인가요?

JSON(JavaScript Object Notation)은 가벼운 데이터 교환 형식입니다. ECMAScript의 하위 집합을 기반으로 합니다. JSON은 완전히 언어 독립적인 텍스트 형식을 사용하지만 C 언어 계열(C, C++, C#, Java, JavaScript, Perl, Python 등 포함)과 유사한 규칙도 사용합니다. 이러한 속성은 JSON을 이상적인 데이터 교환 언어로 만듭니다. 사람이 읽고 쓰기가 쉽고, 기계가 구문 분석하고 생성하기도 쉽습니다(일반적으로 네트워크 전송 속도를 높이는 데 사용됨).

1. JSON 문자열을 JSON 객체로 변환: eval() 및 JSON.parse

eg- json string:

var data = '{ "name": "dran", "sex": "man" }';
var obj = eval("("+data+")"); 或者
var obj = JSON.parse(data)；

그런 다음 다음과 같이 읽을 수 있습니다: Alert(obj.name + obj.sex) );

팁: eval에 ("("+data+")");를 추가해야 하는 이유는 무엇인가요?

이유는 평가 자체의 문제에 있습니다. json은 "{}"으로 시작하고 끝나기 때문에 JS에서는 명령문 블록으로 처리되므로 강제로 표현식으로 변환해야 합니다.

괄호를 추가하는 목적은 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의 경우 일반적으로 코드 사양이 엄격하게 적용됩니다. 형식에 문제가 발생하면 해당 효과가 표시되지 않으며 콘솔에 오류가 보고되지 않습니다

추가: 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 loop

$.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;<p style="display:block">'+
'<p>姓名：'+arr1[i].name+' 性别：'+arr1[i].sex+'</p>'+
'<p>学校:'+arr2[j].name+'</p>'+
'<p>地点:'+arr2[j].area+'</p>'+
//'<p>喜好:'+arr1[i].like+'</p>'+ //全显示
//'<p>喜好:'+arr1[i].like[1]+'</p>'+ //单独设置
//'<p>喜好:'+arr1[i].like[0]+'</p>'+
'</p>';
}
$(".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"); 
}
})
<p class="result">frist:</p>
<p class="result2">second:</p>
for

2를 사용하여 반환된 데이터 날짜를 탐색합니다. .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='<p style="display:block">'+
'<p>姓名：'+item.name+' 性别：'+item.sex+'</p>'+
'<p>like:'+item.like+'</p>'+
'</p>'; 
$(".result").append(str); 
})
},
error:function(data){
alert("error"); 
}
})
<p class="result"></p>
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="爱我中华，虽远必诛

이 기사의 사례를 읽었을 것입니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!