前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js读取本地json文件_jquery读取本地json文件

js读取本地json文件_jquery读取本地json文件

作者头像
全栈程序员站长
发布2022-11-04 15:34:15
21.5K0
发布2022-11-04 15:34:15
举报
文章被收录于专栏:全栈程序员必看

大家好,又见面了,我是你们的朋友全栈君。

注:浏览器是肯定不能获取用户浏览器客户机的本地文件的,所以这个json文件和html文件是放在一个tomcat上或者nginx上的,否则会出现跨域问题

1.首先编写一个json文件:demo.json

代码语言:javascript
复制
[ 
{ 
"name":"张三", 
"sex":"男", 
"email":"zhangsan@123.com" 
}, 
{ 
"name":"李四", 
"sex":"男", 
"email":"lisi@123.com" 
}, 
{ 
"name":"王五", 
"sex":"女", 
"email":"wangwu@123.com" 
} 
] 

2.js读取json文件

代码语言:javascript
复制
<script>
		window.onload = function () {
            var url = "demo.json"/*json文件url,本地的就写本地的位置,如果是服务器的就写服务器的路径*/
            var request = new XMLHttpRequest();
            request.open("get", url);/*设置请求方法与路径*/
            request.send(null);/*不发送数据到服务器*/
            request.onload = function () {/*XHR对象获取到返回信息后执行*/
                if (request.status == 200) {/*返回状态为200,即为数据获取成功*/
                    var json = JSON.parse(request.responseText);
                    for(var i=0;i<json.length;i++){
                    	console.log(json[i].name);
                    }
                    console.log(json);
                }
            }
       }
	</script>

3.我的文件位置

js读取本地json文件_jquery读取本地json文件
js读取本地json文件_jquery读取本地json文件

4.用Ajax也是可以的

代码语言:javascript
复制
<script type="text/javascript">
    var Ajax = function ()
    {
        $.getJSON ("demo.json", function (data)
        {
            $.each (data, function (i, item)
            {
               console.log(item.name);
            });
        });
    }();
</script>
代码语言:javascript
复制
$.ajax({
				url: "demo.json",//json文件位置,文件名
				type: "GET",//请求方式为get
				dataType: "json", //返回数据格式为json
				success: function(data) {//请求成功完成后要执行的方法 
				   //给info赋值给定义好的变量
				   var pageData=data;
				   for(var i=0;i<data.length;i++){
					   console.log(pageData[i].name);
				   }
				}
			})

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/182667.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年10月12日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 注:浏览器是肯定不能获取用户浏览器客户机的本地文件的,所以这个json文件和html文件是放在一个tomcat上或者nginx上的,否则会出现跨域问题
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档