请用jquery写一段程序,读取json文件中的数据并显示,json文件包括多组数据,同时给出json文件内容
时间: 2023-12-23 22:03:26 浏览: 26
好的,下面是使用 jQuery 读取 JSON 数据并显示的示例代码:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>读取 JSON 数据</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<ul id="data"></ul>
</body>
</html>
```
JSON 文件内容(假设文件名为 data.json):
```json
{
"data1": [
{"name": "张三", "age": 20},
{"name": "李四", "age": 22},
{"name": "王五", "age": 24}
],
"data2": [
{"name": "Tom", "age": 18},
{"name": "Jerry", "age": 19},
{"name": "Bob", "age": 20}
]
}
```
jQuery 代码:
```javascript
$(function() {
// 读取 JSON 文件
$.getJSON("data.json", function(data) {
// 遍历每组数据
$.each(data, function(key, value) {
// 创建列表项
var item = $("<li></li>");
// 将数据添加到列表项中
$.each(value, function(index, obj) {
item.append(obj.name + "," + obj.age + "岁<br>");
});
// 将列表项添加到页面中
$("#data").append(item);
});
});
});
```
解释一下代码:
1. `$(function() {...})` 表示页面加载完成后执行的代码。
2. `$.getJSON("data.json", function(data) {...})` 表示读取 data.json 文件,并将数据传入回调函数中。回调函数中的 `data` 参数即为读取到的 JSON 数据。
3. `$.each(data, function(key, value) {...})` 表示遍历每组数据,其中 `key` 表示数据的键(即 "data1" 或 "data2"),`value` 表示数据的值(即数组)。
4. `var item = $("<li></li>");` 表示创建一个空的列表项。
5. `$.each(value, function(index, obj) {...})` 表示遍历每个对象,其中 `index` 表示对象在数组中的索引,`obj` 表示对象本身。
6. `item.append(obj.name + "," + obj.age + "岁<br>");` 表示将对象的名称和年龄添加到列表项中。
7. `$("#data").append(item);` 表示将列表项添加到页面中。
最终效果如下:
- 张三,20岁
- 李四,22岁
- 王五,24岁
- Tom,18岁
- Jerry,19岁
- Bob,20岁