关于“jQuery访问json文件中数据的方法示例”的完整攻略，我提供如下说明。
标题
1. 创建json文件
首先要创建一个json文件，可以使用任何文本编辑器，比如sublime、notepad++等等。文件后缀名为.json
2. 读取json文件
读取json文件需要ajax方法。使用jQuery中的 $.getJSON() 方法，可用参数type、url和data来提交，具体实现代码如下所示：
示例1：
$.getJSON('data.json',function(data){
console.log(data);
});
代码解释：
通过jQuery中的 $.getJSON() 方法，向该文件发送一个请求，并且把该文件中存放的JSON数据返回到data中。我们就可以用这个数据对象来支配数据了。这个方法接收以下两个参数：
- 服务器请求的地址。注意，请求地址必须在同一个域中。
- 在请求成功时调用的回调函数。
在此例中，我们直接通过console.log()输出请求到的内容。当然，你可以根据情况对请求到的内容进行加工处理。
3. 在html页面中显示json数据
将获取到的json数据动态地显示在html页面上，我们可以通过jQuery中的each()方法来遍历json文件中的数据，并实现对数据的操作。
示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例2：读取json数据</title>
<script src="../jquery-1.11.3.min.js"></script>
<script>
$(function(){ // 等价于 $(document).ready(function(){});
$.getJSON('data.json', function(data){
$.each(data, function(index, value){
$('p').append(value.name + ' - ' + value.mobile + '<br>');
});
});
});
</script>
</head>
<body>
<h1>示例2：读取json数据</h1>
<p></p>
</body>
</html>
代码解释：
在该示例中，我们使用jQuery的$.each()方法创建一个迭代函数，用于遍历data.json文件中的json数据并把它们展示在html中。具体来说，这个方法接收两个参数：
- 迭代的对象。在此例中，我们的对象是data对象。
- 在每次迭代时执行的回调函数。此项基本与示例1一样，只是在回调函数中将json数据动态显示在html中，遍历的是value数组。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery访问json文件中数据的方法示例 - Python技术站
微信扫一扫 
支付宝扫一扫 