JQ拼装HTML模块
如果 `data.json` 文件也是不同的，即每个地方需要加载不同的 JSON 文件来生成 HTML，可以通过以下方式实现：
1. 准备多个 JSON 文件
例如，准备两个不同的 JSON 文件：
`data1.json`
json
{"name": "Alice", "age": 25},
{"name": "Bob", "age": 30}
`data2.json`
json
{"name": "Charlie", "age": 35},
{"name": "David", "age": 40}
2. 编写 HTML 文件
在 HTML 文件中，针对不同容器加载不同的 JSON 文件，并生成 HTML。
html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 定义生成HTML的函数
function generateList(data) {
var html = '';
$.each(data, function(index, item) {
html += '
html += '
Name: ' + item.name + '
';html += '
Age: ' + item.age + '
';html += '
});
return html;
}
// 加载不同的JSON文件
$(document).ready(function() {
// 第一处使用，加载 data1.json
$.getJSON('data1.json', function(data) {
$('list-container-1').html(generateList(data));
});
// 第二处使用，加载 data2.json
$.getJSON('data2.json', function(data) {
$('list-container-2').html(generateList(data));
});
});
</script>
3. 代码解释
1. `generateList` 函数：
- 用于生成 HTML，接收 JSON 数据作为参数，返回生成的 HTML 字符串。
2. 加载不同的 JSON 文件：
- 使用 `$.getJSON` 分别加载 `data1.json` 和 `data2.json` 文件。
- 将生成的 HTML 插入到不同的容器中（`list-container-1` 和 `list-container-2`）。
4. 运行结果
页面将显示两处不同的内容：
Name: Alice
Age: 25
Name: Bob
Age: 30
Name: Charlie
Age: 35
Name: David
Age: 40
5. 扩展
如果需要为不同容器生成不同的 HTML 结构或样式，可以修改 `generateList` 函数，增加参数来区分不同的生成逻辑。例如：
javascript
function generateList(data, containerId) {
var html = '';
$.each(data, function(index, item) {
if (containerId === 'list-container-1') {
html += '
} else if (containerId === 'list-container-2') {
html += '
}
html += '
Name: ' + item.name + '
';html += '
Age: ' + item.age + '
';html += '
});
return html;
}
// 调用时传入容器ID
$.getJSON('data1.json', function(data) {
$('list-container-1').html(generateList(data, 'list-container-1'));
});
$.getJSON('data2.json', function(data) {
$('list-container-2').html(generateList(data, 'list-container-2'));
});
6. 注意事项
- 确保 JSON 文件路径正确。
- 如果 JSON 文件较大，建议使用异步加载，避免阻塞页面渲染。
- 如果 JSON 文件数量较多，可以将文件路径存储在数组中，通过循环加载和处理。例如：
javascript
const jsonFiles =
{ file: 'data1.json', container: 'list-container-1' },
{ file: 'data2.json', container: 'list-container-2' }
;
$(document).ready(function() {
jsonFiles.forEach(function(item) {
$.getJSON(item.file, function(data) {
$(item.container).html(generateList(data));
});
});
});
这样可以更灵活地处理多个 JSON 文件和容器。
