JavaScript の変換と解析の JSON メソッド例の詳細な説明

JavaScript は JSON を変換および解析します

JavaScript で JSON 文字列を JSON データ形式に解析するには、通常 2 つの方法があります。

戻り値の解析には Function オブジェクトを使用します。

eval 関数を使用して解析し、jquery の各メソッドを走査します。

JQueryでJSONデータを解析する方法は、JQuery非同期リクエストの送信オブジェクトとして、JQueryリクエスト後に返される結果はjsonオブジェクトであり、サーバーからJSON形式で返される文字列の形式をここで考慮します。JSONオブジェクトはカプセル化されています。 JSONObject などのプラグインによるものですが、これに似ているため、ここでは説明しません。

ここでは、JSON 文字列セットが最初に指定されており、文字列セットは次のとおりです。

var data="{
root:
[
    {name:'1',value:'0'},
    {name:'6101',value:'北京市'},
    {name:'6102',value:'天津市'},
    {name:'6103',value:'上海市'},
    {name:'6104',value:'重庆市'},
]
}";

JQueryで非同期に取得するデータ型、jsonオブジェクトと文字列に基づいて、2つのメソッドで得られた結果の処理方法をそれぞれ紹介します。

最初の方法:

eval()

サーバーから返されたJSON文字列は、jqueryの非同期リクエストで型が指定されていない場合、または文字列として受け付ける場合はオブジェクト化する必要がありますが、方法はそれほど面倒ではなく、eval()に文字列を入れて、一度実行してください。このメソッドは、次の例に示すように、通常の javascipt 方法で json オブジェクトを取得するのにも適しています。

// 转换为json对象
var dataObj=eval("("+data+")");

なぜここに ("("+data+")"); を追加するのでしょうか?

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

かっこを追加する目的は、JavaScript コードを処理するときに、ステートメントとして実行するのではなく、eval 関数でかっこ内の式を強制的にオブジェクトに変換することです。オブジェクトリテラル {} などの例を挙げると、外側の大括弧が追加されていない場合、eval は中括弧を JavaScript コードブロックの開始マーカーと終了マーカーとして認識し、{} は空のコードを実行するとみなされます。声明。したがって、次の 2 つの実行結果は異なります。

// return undefined

alert(eval("{}");

// return object[Object]

alert(eval("({})");

この書き方ですが、JSではどこでも見かけます。例: (function()) {}(); クロージャ操作を実行するときなど。

//输出root的子对象数量

alert(dataObj.root.length);

$.each(dataObj.root,fucntion(idx,item){

    if(idx==0){

        return true;

    }

    //输出每个root子对象的名称和值

    alert("name:"+item.name+",value:"+item.value);

})

一般的な js で json オブジェクトを生成するには、$.each() メソッドを for ステートメントに置き換えるだけで済み、その他のメソッドはサーバーから返された JSON 文字列のままで変更されません。

サーバーから返される JSON 文字列の場合、jquery 非同期リクエストでタイプ (通常はこの構成プロパティ) を「json」に設定する場合、または $.getJSON() メソッドを使用してサーバーの戻り値を取得する場合、 eval() は必要ありません。

メソッドを使用する場合、この時点で取得される結果はすでに json オブジェクトであるため、オブジェクトを直接呼び出すだけで済みます。ここでは、$.getJSON メソッドを例としてデータ処理方法を説明します。

$.getJSON("http://www.phpzixue.cn/",{param:"gaoyusi"},function(data){

    //此处返回的data已经是json对象

    //以下其他操作同第一种情况

    $.each(data.root,function(idx,item){

        if(idx==0){

            //同countinue，返回false同break

            return true;

        }

        alert("name:"+item.name+",value:"+item.value);

    });

});

ここで特別な注意が必要なのは、メソッド 1 の eval() メソッドが文字列 (おそらく js スクリプト) を動的に実行するため、システムのセキュリティ上の問題が簡単に発生する可能性があることです。したがって、eval() を回避するいくつかのサードパーティのクライアント側スクリプトライブラリを使用できます。たとえば、JavaScript の JSON が提供するスクリプトライブラリは 3K 未満です。

2 番目の方法:

解析方法は Function オブジェクトを使用して完了することであり、その典型的な用途は、JQuery の AJAX メソッドでの成功などの返されたデータの解析です。

var json='{"name":"CJ","age":18}';
data =(new Function("","return "+json))();

このときのデータはjsonオブジェクトに解析されるデータです。