jQuery の Json 解析の詳しい説明 example_jquery

この記事の例では、jQuery が Json を解析する方法について説明します。参考までに皆さんにも共有してください。詳細は以下の通りです:

はじめに

WEBデータ送信の過程で、jsonはテキスト形式で送信されますが、つまり、 string の軽量形式であり、クライアントは通常、JS を使用して受信した JSON オブジェクトを操作するため、重要なのは JSON オブジェクトと JSON 文字列の間の変換と JSON データの解析です。

まず 2 つの概念を明確にします。例:

JSON 文字列:

コードをコピーします コードは次のとおりです。以下:

var str1 = '{ "name": "deyuyi", "sex": "man" }';

JSON オブジェクト:

コードをコピー コードは次のとおりです:

var str2 = { "name": "deluyi", "sex": "man" };

これは次のように簡単に理解できます:

JSON オブジェクトは JQuery で直接操作できる形式であり、C# と同じようにオブジェクト (クラス名) を使用して属性を指定できます (メソッド);

JSON 文字列は単なる文字列であり、インターセプトしないと、alert() を実行する場合を除き、そこに保存されているデータを直接使用することはできません。 🎜>

1. JSON 文字列を JSON オブジェクトに変換します

上記の str1 を使用するには、まず次のメソッドを使用して JSON オブジェクトに変換する必要があります:

A: eval 関数

eval 関数は、次のようなメソッドを使用して、JSON 形式に本質的に準拠する、またはほぼ準拠する文字列を JSON オブジェクトに直接変換できます。 eval('(' str ')'); // str はこのタイトルの説明を満たす文字列です

//由JSON字符串转换为JSON对象
var str='{ "name": "John" }';
var obj = eval('(' + str + ')'); 
alert( obj.name);
var str2="{ 'name': 'John' }";
var obj2 = eval('(' + str2 + ')'); 
alert( obj2.name);
var str3="{ name: 'John' }";
var obj3 = eval('(' + str3 + ')'); 
alert( obj3.name);

上記は結果「john」を出力します。

Eval メソッドは、次の標準および非標準の形式文字列を変換できます:

var str="{ 'name': 'John' }";
var str2='{ "name": "John" }';
var str3="{ name: 'John' }";

この例を参照ダウンロード パッケージ内: JqueryDemo1.html

B: parseJSON 関数

標準文字列を JSON オブジェクトに変換するもう 1 つの関数は parseJSON() で、jQuery .parseJSON( と同様に使用されます) str)//str はこのタイトルの説明を満たす文字列です

//由JSON字符串转换为JSON对象
var str='{ "name": "John" }';
var obj = jQuery.parseJSON(str)
alert("1"+ obj.name);

上記の結果が出力されます。 「ジョン」。

このメソッドは標準形式のみをサポートしています: var str='{ "name": "John" }';

この例のダウンロード パッケージを参照してください: JqueryDemo2.html

C: JSON.parse 関数

標準文字列を JSON オブジェクトに変換する関数 JSON.parse() もあり、これは JSON.parse(str) として使用できます。 // ここで、 str はこのタイトルの説明を満たす文字列です

var str = '{ "name": "mady", "age": "24" }';
var obj = JSON.parse(str);
alert(obj.name);

上記のすべては結果を出力します。ジョン」。

このメソッドは標準形式のみをサポートしています: var str='{ "name": "John" }';

この例のダウンロード パッケージを参照してください: JqueryDemo3.html

上記の結果は一貫しており、以下に示すようにすべての名前が出力されます:

特記事項: obj が元々 JSON オブジェクトである場合は、eval を使用してください。 () 関数 変換後 (複数の変換であっても) は JSON オブジェクトのままですが、parseJSON() 関数の使用後に問題が発生します (構文例外がスローされます)。

D: 他の方法

どうしても間違いを犯したくない場合は、次のような非標準および不規則な文字列を解析する必要があります。

コードをコピー

コードは次のとおりです: または

{name:mady,age:23}

コードをコピー

コードは次のとおりです: およびその他の考えられる本質的に正しい不正な形式であれば、それを解決できる拡張ライブラリがあります

{name:'mady',age:23}

jquery-json 拡張ライブラリ

ダウンロード アドレスはこちらです:http://code.google.com/p/jquery-json/

このライブラリは jQuery を拡張するために使用され、JSON を使用するために 2 つの関数が拡張されました: toJSON と parseJSONtoJSON 関数は通常の JavaScript オブジェクトを JSON にシリアル化するために使用されます物体。

parseJSON 関数は、通常の JavaScript オブジェクトを JSON オブジェクトにシリアル化するためにも使用されます。

var data=$.toJSON({ x: 2, y: 3 }); 
var obj = jQuery.parseJSON(data); 
alert(obj.x); 
var str = {plugin: 'jquery-json', version: 2.3}; 
var data2=$.toJSON(str); 
var obj2 = jQuery.parseJSON(data2); 
alert(obj2.plugin);

上記のコードの実行結果は次のとおりです。

この例のダウンロード パッケージを参照してください: JqueryDemo5.html

2. JSON オブジェクトを文字列に変換します

toJSONString() を使用できます。またはグローバル メソッド JSON.stringify( ) JSON オブジェクトを JSON 文字列に変換します。 例:

コード

をコピーします。 コードは次のとおりです: または

var last=obj.toJSONString(); //将JSON对象转化为JSON字符

三、解析读取JSON

我们通过各种方式将字符串转换为JSON对象后就是解析他了。
如上面的例子：

复制代码 代码如下:

var str2 = { "name": "mady", "sex": "man" };

就可以这样读取：

复制代码 代码如下:

alert(str2.name);//和C#一样直接往出点…

弹出” mady”。
我们遇到的JSON很少有这么简单的，比如复杂一点的JSON对象如：

复制代码 代码如下:

var str={"GetUserPostByIdResult":{"Age":"33","ID":"2server","Name":"mady"}};

解析用：

      alert(str.GetUserPostByIdResult.Name);//一次点不出来，我多点几次

再再复杂一点的如：

复制代码 代码如下:

var data=" { root: [ {'name':'6200','value':'0'}, {'name':'6101','value':'xa'}, 
{'name':'6102','value':'beijing'}, {'name':'6103','value':'haerbin'}]}";

如果你想单挑的话，解析用：

复制代码 代码如下:

alert(dataObj.root[0].name);

弹出：“6200”。

如果你想群挑的话，解析用：

$.each(dataObj.root, function(index, item) {
  $("#info").append(
      "" +index+":"+ item.name + "" + 
      "" +index+":"+ item.value + "");
});

其中这个“#info”是个DIV的ID。输入结果如下图：

 

参见本例下载包中：JqueryDemo4.html

注意：本例如果要使用其他转换函数请更改字符串内单引号为双引号，外引号为单引号。
本文完整实例代码代码点击此处本站下载。

以上就是jQuery解析Json实例详解_jquery的内容，更多相关内容请关注PHP中文网（www.php.cn）！