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

最新推荐文章于 2024-05-16 13:55:28 发布

xuanpl

最新推荐文章于 2024-05-16 13:55:28 发布

阅读量2.8w

点赞数

文章标签： jquery ajax 本地json文件

本文链接：https://blog.csdn.net/xuanpl/article/details/68928586

版权

很多情况下，我们的页面需要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 。

xuanpl

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
使用jQuery——Ajax请求本地json文件

很多情况下，我们的页面需要Ajax请求json数据生成内容。使用jQuery的 ajax() 方法请求数据时，语法如下：$.ajax({name:value, name:value, ... })示例如下：本地json内容为：{ "list":[ { "manage":[ {"tool":"查询工具"}, {"tool":"管
复制链接

扫一扫