JQUERYプラグイン、スクリプト、チュッツを使用した10 JSONデータ-jsチュートリアル-php.cn

JQUERYプラグイン、スクリプト、チュッツを使用した10 JSONデータ

キーテイクアウト

各プラグイン、スクリプト、チュートリアルのさまざまな例とデモンストレーションと、さらなる調査と学習のためのソースを提供します。
関連投稿：

オンラインJSON TREE VIEWER TOUL

でロードします
この投稿では、MySQLデータベースからデータを取得するPHPスクリプトからJSONデータをjsonデータを取得することにより、他の人の値に基づいて選択ボックスを入力する方法を示しています。

ソースデモ

2。 jQuery json ajaxリクエストとキャッシュ

この投稿では、どのブラウザがリクエストをキャッシュするか、およびそれがキャッシュされていないことを確認する方法を検討します。 JQUERYプラグイン、スクリプト、チュッツを使用した10 JSONデータ

ソースデモ

3。 doubleSuggest

jQueryプラグインは、入力するときに結果を示唆するUIをセットアップします。 2種類の提案が表示されます。1つ目は、ローカルデータと2番目のデータとAjax検索クエリの結果を2つ目（および遅く）します。 JQUERYプラグイン、スクリプト、チュッツを使用した10 JSONデータ

ソースデモ 4。 DDCHART：JSON駆動ズーム可能なドリルダウンバーチャート

は、JSONデータ駆動型のバーチャートプラグインで、Animation Effectsのようなフラッシュを備えた上品なバーチャートを作成します。

ソースデモ

5。 jquery

を使用してWebウィジェットを構築する方法

興味深い点は次のとおりです。 >ウィジェットのコードが誤ってページの残りの部分を台無しにしないことを確認します。 >外部CSSおよびJavaScriptファイルを動的にロードし、 > JSONPを使用したブラウザのシングルオリジンポリシーをバイパスします。

ソースデモ

6。 jquery tokeninput JQUERYプラグイン、スクリプト、チュッツを使用した10 JSONデータ

jQueryプラグインは、ユーザーが事前定義されたリストから複数のアイテムを選択できるようにし、各アイテムを入力するために自動完了を使用して。ソースデモ

7。 jQuery Quickie

JQueryを使用した無制限のスクロール。 Twitter APIを使用して例を作成しているので、JSONについても少し学びます…

ソースデモ

8。 jQuery Chartotableプラグイン

PHP GDを使用して文字を画像に変換し、次にGlyph Matrixを含むJSONオブジェクトに変換します。

ソースデモ

9。 FlexBox - jQuery ajaxベースのTextbox＆Selectbox JQUERYプラグイン、スクリプト、チュッツを使用した10 JSONデータ

ajaxを使用してJSONデータを取得および結合するために、HTMLテキストボックスとドロップダウンの非常に柔軟な交換を目的としたjQueryプラグイン。

ソースデモ

10。 jQueryランダムに回転する画像ギャラリー - mosaiqy

Mosaiqyは、モザイクのようなグリッドインターフェイスで画像を提示するためのjQueryプラグインです。 JSON/JSONPデータソースから画像を取得し、画像ホスティングサービスとの統合を非常に簡単にし、Flickr、Instagram、Panoramioのデモがすでにあります。

ソースデモ JSONデータとjQuery

に関するよくある質問（FAQ）

jQueryを使用してjsonデータを解析するにはどうすればよいですか？

jQueryは、json文字列を解析するために使用される$ .parsejson（）と呼ばれるメソッドを提供します。この方法は、よく形成されたJSON文字列を取り、結果のJavaScriptオブジェクトを返します。 JSON文字列は、JSON形式で書かれたテキストである必要があります。例は次のとおりです。

var json = '{"name"： "john"、 "age"：30、 "city"： "new York"}';

var obj = $ .parsejson（ json）;

この例では、objはこのようにアクセスできるJavaScriptオブジェクトです：obj.name、obj.age、obj.city。

JSONビューアーとは何ですか？なぜそれが必要なのか？データの構造とコンテンツをより簡単に理解するのに役立つため、大量のデータを扱うときに特に役立ちます。 JSONの視聴者は、多くの場合、構文の強調表示、折りたたみ可能な木、検索機能などの機能を提供し、データのナビゲートと分析を容易にします。

jQuery jsonビューアープラグインを使用するにはどうすればよいですか？

jQuery jsonビューアープラグインは、JSONデータを読みやすい形式で視覚化できるシンプルで使いやすいツールです。それを使用するには、最初にJQueryライブラリとプラグインのJavaScriptおよびCSSファイルをHTMLファイルに含める必要があります。次に、jsonViewer（）関数を使用してJSONデータを表示できます。例は次のとおりです。

<script><br>var json = {"name"： "john"、 "age"：30、 "city"： "new York"};<br>$（ '＃json-container'）。jsonviewer（json）; <br> </script>

この例では、JSONデータはIDのdivに表示されますjson-container。

jsonデータを表示するためのjqueryの代替手段は何ですか？

JSONデータを表示するためのJQueryには多くの選択肢があります。人気のあるものには、ブラウザでJSONデータを直接表示できるブラウザ拡張機能であるJSonViewが含まれます。 Postman、組み込みのJSONビューアを含むAPI開発のツール。 jsonlintやjsonformatterなどのオンラインツール。形成。これらのエラーは、トライキャッチブロックを使用して処理できます。例は次のとおりです。

try {

var obj = $ .parsejson（json）;

} catch（e）{
console.error（ "parsing error："、e）;この例では、
}

解析中にエラーが発生した場合、キャッチされてコンソールにログに記録されます。 jQueryを使用して、ajaxリクエストを行い、jsonデータを処理しますか？

はい、jqueryは$ .ajax（）、$ .get（）、$ .post（）を含むAjaxリクエストを作成する方法をいくつか提供します。これらのメソッドは、DatAtypeオプションを「JSON」に設定することにより、JSONデータを処理できます。例は次のとおりです。

$。ajax（{

url： "https://api.example.com/data"、

dataType： "json"、

success：function（ data）{}
}）;

この例では、 $ .ajax（）メソッドは、JSONデータを返すURLにリクエストを行うために使用されます。リクエストが成功したときに成功コールバック関数が呼び出され、返されたデータをコンソールにログに記録します。間隔とインデントを使用して、より読みやすくするようにフォーマットされています。 JavaScriptのjson.Stringify（）メソッドは、このオプションを提供します。例は次のとおりです。

var json = {"name"： "john"、 "age"：30、 "city"： "new York"};
var formattedjson = json.stringify（json、 null、2）;
console.log（formattedjson）;

この例では、json.stringify（）メソッドが3番目の引数で設定された3番目の引数で使用されます。 2、つまり、インデントに2つのスペースを使用することを意味します。

jqueryでjsonデータをフィルタリングするにはどうすればよいですか？

$ .grep（）関数を使用して、jqueryでjsonデータをフィルタリングできます。この関数は、引数として配列と関数を取り、関数が真である要素のみを含む新しい配列を返します。例は次のとおりです。

var data = [
{"name"： "john"、 "age"：30、 "city"： "new York"}、
{"name"： " 「ジェーン」、「年齢」：25、「都市」：「シカゴ」}、
{"name"： "bob"、 "age"：35、 "city"： "los Angeles "}
];
var filtereddata = $ .grep（data、function（item）{
return item.age> 30;
}）;

この例、$ .grep（）関数はデータ配列をフィルタリングし、年齢が30を超えるアイテムのみを返すために使用されます。 JSON文字列に？例は次のとおりです。

var obj = {"name"： "john"、 "age"：30、 "city"： "new York"};

var json = json.Stringify（obj） ;この例では、json.stringify（）メソッドを使用して、objオブジェクトをjson文字列に変換します。データ？

JSONデータは、さまざまなツールやライブラリを使用して検証できます。人気のあるオンラインツールの1つはJSonLintです。これにより、JSONデータを貼り付けてエラーを確認できます。 JavaScriptでは、json.parse（）メソッドを使用したトライキャッチブロックを使用して、json文字列がよく形成されているかどうかを確認できます。例は次のとおりです。

try {
json.parse（json）;
console.log（ "valid json"）;

} catch（e）{