以下是一个简单的示例,展示了如何使用Ajax从JSON文件中获取数据:
HTML代码:
Ajax - JSON 示例
JSON数据(保存为data.json文件):
[
{
"name": "张三",
"age": 20
},
{
"name": "李四",
"age": 25
},
{
"name": "王五",
"age": 30
}
]
这个示例中,通过点击按钮触发loadData()
函数。函数内部使用$.ajax()
方法发起一个GET请求,请求URL为"data.json",并将数据类型设置为"json"。成功获取数据后,使用$.each()
方法遍历每个对象,并将其添加到页面的"data-container"元素中。
注意:这个示例使用了jQuery库来简化Ajax操作。如果你不想使用jQuery,可以使用原生JavaScript的XMLHttpRequest对象来实现相同的功能。