ホームページ > 記事 > ウェブフロントエンド > JavaScriptでのJSONの使い方の詳細なコード説明
JavaScriptでのJSONの使い方の詳細なコード説明
- yuliaオリジナル
- 2018-09-14 17:50:371462ブラウズ
最近、JavaScript の知識をまとめてみんなと共有しました。この記事では、JSON に焦点を当て、JSON と XML の違い、JSON テキスト、および JSONP を解析する方法について説明します。
困っている友人が参考になれば幸いです。
1. JSON とは
JSON は JavaScript オブジェクト表記法です。
2. JSON と XML の比較
類似点: どちらもテキスト情報を保存および交換する方法です。
違い: JSON は XML よりも小さく、高速で、解析が簡単です。 XML は、JSON が登場する前に大流行しました。XML には、データの保存とデータの送信という 2 つの主な機能がありました。しかし、時代が経つにつれて、XML ではデータの送信ができなくなり、後に誕生した JSON がデータの送信に置き換えられました。 .XML。そのため、JSON は主にデータの送信に使用され、XML は主にデータの保存に使用されます。 Ajax での JSON の送信については、「Ajax の使用の簡単な分析」の記事を参照してください。
3. JSON 構文
データは「名前:値」のペアで構成され、データはカンマで区切られ、波括弧でオブジェクトが保存され、角括弧で囲まれます。配列を保存します。
一般的な JSON 記述方法:
var sites = [
{ "name":"百度" , "url":"www.baidu.com" },
{ "name":"Google" , "url":"www.google.com" },
];
或是：
var tx = '{ "sites" : [' +
'{ "name":"百度" , "url":"www.baidu.com" },' +
'{ "name":"Google" , "url":"www.google.com" } ]}';4. JSON テキストの解析方法
上記の 2 番目の状況で JavaScript クラスを記述する場合、JSON は以下のようにする必要があります。 parsed を実行すると、対応する JavaScript オブジェクトが生成されます。
1、eval() メソッド
このメソッドは JavaScript の組み込みメソッドです。
<!DOCTYPE html>
<html>
<head>
<title>测试JSON</title>
<meta name="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="name">
</div>
<script>
var tx = '{ "sites" : [' +
'{ "name":"百度" , "url":"www.baidu.com" },' +
'{ "name":"Google" , "url":"www.google.com" } ]}';
var obj = eval ("(" + tx + ")");
alert(obj.sites[0].name+","+obj.sites[0].url);
</script>
</body>
</html>JSON 内のデータにアクセスする方法は 2 つあり、1 つはオブジェクトを使用する方法です。 .key obj.sites[0].url などで取得する方法。もう 1 つは、obj.sites[0]["key"] などのオブジェクト ["key"] を通じて取得する方法です。最初の方法の利点は単純さであり、2 番目の方法の利点は、文字列を通じて JSON オブジェクトの値を取得できることです。これは、文字列のキーを動的に結合してから、対応する値を取得する必要がある場合に適用できます。が得られます。
2、JSON.parse() メソッド
上記の eval() メソッドで解析された文を次のように置き換えるだけです。
var obj = JSON .parse(tx) );
3, JSON 配列
Ajax でデータにアクセスする場合、サーバーから返された JSON データを解析し、JSON 配列を比較することがよくあります。次に、 JSON 配列の解析。 SON 配列を解析するには、for ループまたは for...in... ループを使用できます。
for-in を使用して配列にアクセスします。
<body>
<p>你可以使用 for-in 来访问数组:</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
};
for (i in myObj.sites) {
x += myObj.sites[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>Use for ループ to配列にアクセスします:
<body>
<p>使用 for 循环访问数组:</p>
<p id="demo"></p>
<script>
var myObj, i, x = "";
myObj = {
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
};
for (i = 0; i < myObj.sites.length; i++) {
x += myObj.sites[i] + "<br>";
}
document.getElementById("demo").innerHTML = x;
</script>
</body>MyObj.sites.length はサイト配列の長さを取得できます。
5. JSON オブジェクトを解析する方法
JSON を JSON テキストに解析する必要がある場合は、次の関数を使用するだけです:
var JSONString = JSON. stringify(JSONObject);
stringify 関数は関数を解析せず、オブジェクト内の関数を削除します。この問題を解決するには、関数を文字列に変換します。 ##var obj = { " name":"Runoob", "alexa":function () {return 10000;}, "site":"www.runoob.com"};
//関数をstringobj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);
JSONP
6. JSONP とは: JSONP(json width padding)、json の使用パターン。 JSONP の機能: Web ページが他のドメイン名からデータを取得できるようになります。つまり、ドメイン間でデータを読み取ることができます。 JSONP を使用する理由: 同一生成元ポリシー (NetScape によって提案されたセキュリティ ポリシー) のため。
<!DOCTYPE html>
<html>
<head>
<title>jsonp.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<script type="text/javascript">
function jsonpCallback(result){
alert(result[1].name);
}
</script>
<script type="text/javascript" src="http://localhost:8080/Jsonp/jsonp.jsp?callback=jsonpCallback"></script> </body>
</html>サーバーの完全なコード:
<%
String callback = request.getParameter("callback");
out.print(callback+"([ { name:'John',age:'19'},{ name:'joe',age:'20'}] );");
%>コードの説明:
データを呼び出すのはクライアントであり、データを送信する人はサーバーと呼ばれます。サーバーの URL にアクセスするコードでは、クライアントは指定された関数名のパラメーター (jsonCallback) を追加し、getParameter を使用してサーバー上のデータを取得し、最後に js の構文に従ってストリームに出力します。 。ここで読者は、上記のサーバー側のデータが jsp ファイルの内容全体であることに注意する必要があります。jsp を使用するだけでなく、php や jquery などのテクノロジーを使用してサーバー側を実装することもできますが、使用されるサフィックス名と構文は異なります。一貫性がなければなりません。
以上がJavaScriptでのJSONの使い方の詳細なコード説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。