Jsonオブジェクトと文字列を相互に変換する手順の詳細な説明

今回は、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+")"); を追加する必要があるのはなぜですか?

その理由は、eval 自体の問題にあります。 jsonは「{}」で始まり最後が「{}」で終わるため、JSではステートメントブロックとして処理されるため、強制的に式に変換する必要があります。

かっこを追加する目的は、JavaScript コードを処理するときに、かっこ内の式をステートメントとして実行するのではなく、eval 関数で強制的にオブジェクトに変換することです。たとえば、オブジェクト リテラル {} を考えます。外側の括弧が追加されていない場合、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 には厳密なコード仕様があり、形式に問題があると、対応する効果が表示されず、コンソールにエラーが報告されません

。 json データを読み取り、スプライシングを表示します:

json ファイル:

{
"first":[
{"name":"张三","sex":"男","like":["吃饭","睡觉","打豆豆"]},
{"name":"李四","sex":"男"},
{"name":"王武","sex":"男"},
{"name":"李梅","sex":"女"},
],
"second":[
{"name":"上海大学","area":"上海"},
{"name":"武汉大学","area":"武汉"},
{"name":"北京大学","area":"北京"},
{"name":"山东大学","area":"山东"},
]
}

html および ajax コード

1。各ループは $.each メソッドを使用して、返されたデータの日付とデータを走査します。それを class .result に挿入します

JSON:

$.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

PS: 一般的な JS で JSON オブジェクトを生成するには、$.each() メソッドを for ステートメントに置き換えるだけで済み、残りは変更されません

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

この記事の事例を読んだことがあるはずです。この方法をマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

JSでのJSON使用スキルの詳細な説明

jQuery操作のjsonメソッドの概要

Json文字列およびJson配列メソッドを解析するJqueryの詳細な説明

以上がJsonオブジェクトと文字列を相互に変換する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。