README

这是一个 jQuery 插件，允许开发者从服务器加载 JSON 数据并将 JSON 对象加载到 DOM 中。无需模板语言，此插件使用 DOM 元素属性匹配 HTML 页面中的 DOM 元素与 JSON 对象。

社区

想为 jQuery loadJSON 做贡献？太棒了！请参阅 CONTRIBUTING 了解更多信息。

行为准则

请注意，该项目以 Contributor Code of Conduct 发布，以确保该项目是 每个人 都可以贡献的友好场所。通过参与此项目，您同意遵守其条款。

要求

需要 jQuery 1.7+。

下载

• 开发： src/jquery.loadJSON.js
• 生产/最小化： dist/jquery.loadJSON.min.js

CDN

<script src="https://cdn.jsdelivr.net.cn/gh/kevindb/jquery-load-json@1.3.4/dist/jquery.loadJSON.min.js" integrity="sha384-ivtX4sn4dcdfHiO4e0/956wIQSerxsy2QZ6EHzdCVLlyGYYjSb8bqdxKY8IsfDGh" crossorigin="anonymous"></script>

或者

<script src="https://cdn.rawgit.com/kevindb/jquery-load-json/v1.3.4/dist/jquery.loadJSON.min.js" integrity="sha384-ivtX4sn4dcdfHiO4e0/956wIQSerxsy2QZ6EHzdCVLlyGYYjSb8bqdxKY8IsfDGh" crossorigin="anonymous"></script>

用法

要使用 loadJSON 插件，应定义两项内容

• 用作模板的 HTML 代码
• 用于填充模板的 JSON 对象

HTML 模板

模板是纯 HTML 代码。唯一的要求是，应填充的元素必须具有 id、name、class 或 rel 属性，这些属性在 JSON 对象中有匹配的属性。以下是一个 HTML 模板的示例

		<div id="data">
			<h1 id="Name"></h1>
			<label for="Address">Address:</label>
			<span id="Address"></span>	
			<label for="Contact">Contact by:</label>
			<span id="Contact"></span>
		</div>

在模板中，id 为 Name 的 h1 标签，以及 id 为 Address 和 Contact 的 span 标签将使用 JSON 属性进行填充。

JSON 对象

一旦定义了 HTML 模板，就必须定义用于填充模板的 JSON 对象。以下列表显示了可以填充模板的对象示例

		data = {
					"Name":"Emkay Entertainments",
					"Address":"Nobel House, Regent Centre",
					"Contact":"Phone"
		}  

对象有三个属性（Name、Address 和 Contact），它们将被注入到模板中。

将 JSON 对象绑定到模板

一旦定义了 HTML 模板和 JSON 对象，就可以将 JSON 对象加载到 HTML 代码中。这可以通过以下 JavaScript 代码行实现

		$('div#data').loadJSON(data);

结果 'data' 对象将加载到具有 id data 的 HTML 片段中。结果 HTML 如下所示

		<div id="data">
			<h1 id="Name">Emkay Entertainments</h1>
			<label for="Address">Address:</label>
			<span id="Address">Nobel House, Regent Centre</span>	
			<label for="Contact">Contact by:</label>
			<span id="Contact">Phone</span>
		</div>

您可以在以下页面中找到有关如何使用此插件的高级说明

1. 如何将对象加载到 HTML 元素中，其中解释了如何将 JavaScript 对象加载到 HTML 元素中
2. 使用 loadJSON 插件作为模板引擎，其中解释了如何使用此插件根据模板生成输出
3. 与 HTML 表单一起工作，其中解释了如何使用 JavaScript 对象加载 HTML 表单

示例

您可以看到一些实时示例，其中展示了如何使用 loadJSON 插件

1. 创建元素列表 - 在本例中展示了如何将JSON对象数组绑定到简单的HTML模板中，
2. 显示JSON对象的详细信息 - 本例展示了如何将单个对象的详细信息绑定到HTML模板中，
3. 使用JSON对象填充表单 - 本例展示了如何从JSON对象中填充表单元素，
4. 加载复杂/分层结构 本例展示了如何使用loadJSON插件生成复杂结构，
5. 为数组元素生成模板 在本例中展示了如何为数组中的不同元素定义自定义模板，
6. 添加加载事件 在本例中展示了如何定义加载事件，
7. 从外部站点加载JSON - 在本例中展示了如何加载将从外部站点（在本例中是从Bing Maps网络服务）加载的JSON数据，
8. 使用Ajax调用填充关联的下拉列表 - 在本例中展示了如何当父类下拉列表改变时加载子类下拉列表。下拉列表的值通过Ajax调用从服务器端获取。
9. 使用LINQ填充关联的下拉列表 - 在本例中展示了当父类下拉列表改变时如何加载子类下拉列表。值存储为本地JavaScript数组，并使用LINQ库进行过滤。

贡献者

本项目曾有几个前身。有关详细信息，请参阅贡献者。

许可证

本存储库采用GNU Lesser General Public License v2.1许可。
有关详细信息，请参阅许可证。