使用jQuery——Ajax请求本地json文件

来源：互联网发布：淘宝内容营销都有哪些编辑：程序博客网时间：2024/06/06 23:56

很多情况下，我们的页面需要Ajax请求json数据生成内容。使用jQuery的 ajax() 方法请求数据时，语法如下：

$.ajax({name:value, name:value, ... })

示例如下：

本地json内容为：

{  "list":[    {      "manage":[        {"tool":"查询工具"},        {"tool":"管理工具"}      ]    }  ]}

完整代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>ajax请求本地json文件</title></head><body><div id="test"></div><script  src="jquery-2.2.1.min.js"></script><script>    $(function(){        $.ajax({            //请求方式            type:"GET",            //文件位置            url:"json_data.json",            //返回数据格式为json,也可以是其他格式如            dataType: "json",            //请求成功后要执行的函数，拼接html            success: function(data){                var str="<ul>";                $.each(data.list[0].manage,function(i,n){                    str+="<li>"+n.tool+"</li>";                });                str+="</ul>";                $("div").append(str);            }        });    });</script></body></html>

得出结果：

查询工具
管理工具

ajax请求成功，值得一提的是 each() 方法中，的两个参数，第一个是数组对象，由于我的json树内容有两层，一开始误用成

data.list.manage

导致出错，这种小失误值得警惕。第二个参数是call调用的函数，在这里传入的 i 和 n 分别代表元素在数组的位置和元素值。遍历json元素时可以用“.”获取相应的的值，如此时的 n.tool 。

0 0