带有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中文网其他相关文章！