jQuery访问json文件中数据的方法示例

关于“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技术站

jQuery访问json文件中数据的方法示例

标题

1. 创建json文件

2. 读取json文件

3. 在html页面中显示json数据

相关文章