jQuery ajax读取json文件内容

最新推荐文章于 2024-08-02 04:03:02 发布

夜空下的微笑

最新推荐文章于 2024-08-02 04:03:02 发布

阅读量744

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Jquery

本文链接：https://blog.youkuaiyun.com/weixin_41014370/article/details/78639828

Jquery 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个具体的案例，展示了如何使用JavaScript加载并解析JSON文件中的数据，包括数据的获取方式、处理流程及最终在网页上的展示效果。此外，还提供了一个城市信息的JSON文件示例及其加载方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

json文件：

[  
    {"name":"哈哈··","email":"邮箱01","gender":"男","hobby":["上网","打球"]},  
    {"name":"呵呵··","email":"邮箱02","gender":"男","hobby":["网购","打球"]}  
]

<script type="text/javascript">  
$(document).ready(function() {  
    $.ajax({  
        //请求方式为get  
        type:"GET",  
        //json文件位置  
        url:"user.json",  
        //返回数据格式为json  
        dataType: "json",  
        //请求成功完成后要执行的方法  
        success: function(data){  
            //使用$.each方法遍历返回的数据date,插入到id为#result中  
            $.each(data,function(i,item){  
                var content=item.name+","+item.email+","+item.gender+  
","+item.hobby[0]+","+item.hobby[1]+"</br>";  
                $("#result").append(content);  
            })  
        }  
    })  
});  
</script>

写一个json文件，文件名为：city.json

{"resource":{
    "label":"zuanshi",
    "key":"1"
  },
 "city":{
    "value":"beijing",
    "key":"01"
  }
}

调用json文件方法

var url="ajax/city.json"

$.getJSON(url, function( res ) {

  var key="resource"
  var data=JSON.stringify(res[key])

  var value=JSON.parse(data).key
});