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

この記事の例では、JavaScript の変換と JSON メソッドの解析について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

json形式のデータは以下の通りです:

var json = { 'jquery': [{ "id": "1", "type": "ASP.NET", "title": "JSON全解析"}] }
    alert(json.jquery[0].id);
    alert(json.jquery[0].type);
    alert(json.jquery[0].title);

JavaScript は json データを解析します:

window.onload = function() {
 var json = { "China": "[{'City':'上海','value':'1'},{'City':'南京','value':'2'},{'City':'杭州','value':'3'},{'City':'武汉','value':'4'}]" }
 var datas = eval(json.China);
 for (var i = 0; i < datas.length; i++) 
 {
  alert(datas[i].City);
  alert(datas[i].value);
 }
}

補足: jQuery 解析 json メソッド:

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

JQuery を使用して JSON データを解析します。JQuery 非同期リクエストの送信オブジェクトとして、ここで考慮されるのは、JSON 形式でサーバーによって返される文字列の形式です。 JSONObject などのプラグイン JSON オブジェクトはこれに似ているため、ここでは説明しません。

ここではまず 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 非同期リクエストが型を指定しない場合、または文字列モードで受け入れる場合は、オブジェクト化する必要があります。それほど面倒ではありません。 in eval() 1 回実行されます。このメソッドは、通常の javascipt を使用して json オブジェクトを取得する場合にも適しています。次に例を示します。

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

ここで eval に ("(" 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.xxxx.com/",{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オブジェクトです。

この記事が JavaScript プログラミングのすべての人に役立つことを願っています。