JavaScriptでのJSONの使い方の詳細なコード説明-jsチュートリアル-php.cn

JavaScriptでのJSONの使い方の詳細なコード説明

yulia

リリース： 2018-09-14 17:50:37

オリジナル

1497 人が閲覧しました

最近、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 = &#39;{ "sites" : [&#39; +
&#39;{ "name":"百度" , "url":"www.baidu.com" },&#39; +
&#39;{ "name":"Google" , "url":"www.google.com" } ]}&#39;;

ログイン後にコピー

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 = &#39;{ "sites" : [&#39; +
&#39;{ "name":"百度" , "url":"www.baidu.com" },&#39; +
&#39;{ "name":"Google" , "url":"www.google.com" } ]}&#39;;
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"};

//関数をstring

obj.alexa = obj.alexa.toString();
var myJSON = JSON.stringify(obj);
JSONP

6. JSONP とは: JSONP(json width padding)、json の使用パターン。 JSONP の機能: Web ページが他のドメイン名からデータを取得できるようになります。つまり、ドメイン間でデータを読み取ることができます。 JSONP を使用する理由: 同一生成元ポリシー (NetScape によって提案されたセキュリティポリシー) のため。

JSP を使用した JSONP の実装

<!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:&#39;John&#39;,age:&#39;19&#39;},{ name:&#39;joe&#39;,age:&#39;20&#39;}] );"); 
%>

ログイン後にコピー

コードの説明:

データを呼び出すのはクライアントであり、データを送信する人はサーバーと呼ばれます。サーバーの URL にアクセスするコードでは、クライアントは指定された関数名のパラメーター (jsonCallback) を追加し、getParameter を使用してサーバー上のデータを取得し、最後に js の構文に従ってストリームに出力します。。ここで読者は、上記のサーバー側のデータが jsp ファイルの内容全体であることに注意する必要があります。jsp を使用するだけでなく、php や jquery などのテクノロジーを使用してサーバー側を実装することもできますが、使用されるサフィックス名と構文は異なります。一貫性がなければなりません。

以上がJavaScriptでのJSONの使い方の詳細なコード説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。