帶有jQuery插件，腳本和TUTS的10個JSON數據

鑰匙要點

• >本文介紹了10個帶有jQuery插件，腳本和TUTS的JSON數據，提供了創建動態的Web元素的方法，例如具有閃光燈般的動畫效果的條形圖，Web窗口小部件或類似於Mosaic的網格接口，用於圖像。
• >該帖子還提供了一個全面的常見問題解答部分，回答有關JSON數據和jQuery的常見查詢，包括如何解析JSON數據，使用JSON查看器，解析時處理錯誤並做出AJAX請求。 它為每個插件，腳本和教程提供了各種示例和演示，以及用於進一步探索和學習的來源。
>
• 今天的帖子是10個帶有jQuery插件，腳本和TUTS的JSON數據的集合。了解如何使用DDCHART（JSON驅動的Zoomable Dirst doust bar Chart）創建具有閃光燈的優雅條形圖，例如動畫效果）等等……享受！
>相關文章：

在線json樹查看器工具

• 10個在線JSON工具

1。加載JSON數據，使用JQuery，PHP和MySQL

這篇文章通過從php腳本中獲取JQUERY的JSON數據來填充選擇框，該數據從MySQL數據庫中獲取數據。

源演示

2。 jQuery json ajax請求和緩存

這篇文章介紹了瀏覽哪些瀏覽請求的緩存，以及如何確保其不被緩存。

>

源演示

3。雙打 > jQuery插件將設置一個UI，建議您在輸入時提出結果。它將顯示兩種類型的建議，首先（和更快）本地數據和第二個建議（較慢）（較慢）來自Ajax搜索查詢的結果。

來源 演示

4。 DDCHART：JSON驅動的Zoomable Drill Dours doust bar Chart

是一個JSON數據驅動的條形圖插件，可創建具有閃光燈類似動畫效果的優雅條形圖。

源演示

5。如何使用jQuery

構建Web小部件 有趣的觀點將是： >確保小部件的代碼不會意外地弄亂頁面的其餘部分， >動態加載外部CS和JavaScript文件， >使用JSONP旁路瀏覽器的單一原始策略。

來源 演示

6。 jQuery tokeninput

> jQuery插件，該插件允許您的用戶從預定義列表中選擇多個項目，並使用自動完成在輸入時找到每個項目。

源演示

7。 jQuery Quickie

>使用jQuery的無限滾動。我已經使用了Twitter API來舉例說明，因此您也會學到一些有關JSON的知識……

> 來源 演示

8。 jQuery Chartotable插件

>它使用一些PHP GD將字符轉換為圖像，然後轉換為包含Glyph矩陣的JSON對象。

來源 演示 9。 Flexbox - 基於jQuery Ajax的TextBox＆SelectBox

>使用Ajax檢索和綁定JSON數據的jQuery插件，它是非常靈活的html文本框和下拉列表的非常靈活的替換

來源 演示

10。 jQuery隨機旋轉的圖像庫 - Mosaiqy Mosaiqy是一個用於在類似鑲嵌的網格接口中顯示圖像的jQuery插件。它從JSON/JSONP數據源檢索圖像，這使得與圖像託管服務集成非常容易，並且已經有用於Flickr，Instagram和Panoramio的演示。

>

源演示

經常詢問有關JSON數據和jQuery

的問題（常見問題解答） >我如何使用jQuery解析JSON數據？

> jQuery提供了一種稱為$ .parsejson（）的方法，該方法用於解析JSON字符串。此方法採用良好的JSON字符串，並返回所得的JavaScript對象。 JSON字符串需要是以JSON格式編寫的文本。這是一個示例：

var json ='{“ name”：“ john”，“ age”：30，“ city”：“ new York”}'； json）;

在此示例中，OBJ是一個可以這樣訪問的JavaScript對象：obj.name，obj.age，obj.city。
>什麼是JSON查看器，為什麼我需要它？

> JSON查看器是一種工具，可讓您以結構化的，易於閱讀的格式查看和檢查JSON數據。在處理大量數據時，它特別有用，因為它可以幫助您更輕鬆地了解數據的結構和內容。 JSON觀眾通常提供語法突出顯示，可折疊樹和搜索功能等功能，從而更容易導航和分析數據。

>如何使用jQuery json Viewer插件？

> jQuery json Viewer插件是一種簡單易用的工具，可讓您以人為可讀的格式可視化JSON數據。要使用它，您首先需要在HTML文件中包括jQuery庫和插件的JavaScript和CSS文件。然後，您可以使用JSONVIEWER（）函數顯示您的JSON數據。這是一個示例：




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

在此示例中，JSON數據顯示在DIV中，帶有ID json-container。

> jQuery查看JSON數據的替代方案是什麼？

有許多替代方法可以查看JSON數據。一些受歡迎的內容包括JSONVIEW，這是一種瀏覽器擴展程序，可讓您直接在瀏覽器中查看JSON數據。 Postman，一種API開發工具，包括內置的JSON查看器；以及諸如JSONLINT和JSONFORTARTER的在線工具。

>在用jQuery解析JSON數據時，我該如何處理錯誤？

>當用jQuery解析JSON數據時，如果JSON字符串不錯，則可能會發生錯誤形成。您可以使用TryCatch塊來處理這些錯誤。這是一個示例：

嘗試{

var obj = $ .parsejson（json）;
} catch（e）{console.error（“解析錯誤：”，e）;在此示例中，
}

，如果在解析過程中發生錯誤，則將被捕獲並登錄到控制台。
>我可以使用jQuery提出AJAX請求並處理JSON數據嗎？ （）。這些方法可以通過將數據類型選項設置為“ JSON”來處理JSON數據。這是一個示例：

$。ajax（{{
url：“ https：//api.example.com/data”，

> datatype：“ json”，

data）{

console.log（data）;

}
}） $ .ajax（）方法用於向返回JSON數據的URL提出請求。當請求成功時，將調用成功回調函數，並將返回的數據記錄到控制台。
>
>我如何格式化JSON數據以使其更可讀？

JSON數據可以是格式化以通過使用間距和凹痕使其更可讀。 JavaScript中的JSON.STRINGIFY（）方法為此提供了一個選項。這是一個示例：

var json = {“ name”：“ john”，“ age”：30，“ city”：“ new York”}; console.log（formattedjson）;
在此示例中，json.stringify（）方法與第三個參數設置為2，這意味著它將使用2個空間進行凹痕。

>

>如何使用jQuery？

>您可以使用$ .GREP（）函數過濾JSON數據。此函數將數組和一個函數作為參數，並返回一個新數組，該數組僅包含函數返回true的元素。以下是一個示例：

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的項目。

>

我可以使用jQuery轉換JavaScript是對JSON字符串的對象？這是一個示例：

var obj = {“ name”：“ john”，“ age”：30，“ city”：“ new York”}； ;在此示例中，使用JSON.STRINGIFY（ ）方法將OBJ對象轉換為JSON字符串。

如何驗證JSON可以使用各種工具和庫來驗證數據？一個流行的在線工具是JSONLINT，它使您可以粘貼JSON數據並檢查錯誤。在JavaScript中，您可以使用JSON.PARSE（）方法使用try-catch塊來檢查JSON字符串是否構成良好。這是一個示例：

嘗試{
json.parse（json）;

console.log（“有效json”）;

} catch（e） （“無效的JSON” ）;

}

在此示例中，如果json.parse（）方法會引發錯誤，則表示JSON String
>

以上是帶有jQuery插件，腳本和TUTS的10個JSON數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！