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

js读取本地json文件_jquery读取本地json文件1.首先编写一个json文件:demo.json[{“name”:”张三”,”sex”:”男”,”email”:”zhangsan@123.com”},{“name”:”李四”,”sex”:”男”,”email”:”lisi@123.com”},{“name”:”王五”,”sex”:”女”,”email”:”wangwu@123.com…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

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

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

[ 
{ 
"name":"张三", 
"sex":"男", 
"email":"zhangsan@123.com" 
}, 
{ 
"name":"李四", 
"sex":"男", 
"email":"lisi@123.com" 
}, 
{ 
"name":"王五", 
"sex":"女", 
"email":"wangwu@123.com" 
} 
] 

2.js读取json文件

<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文件

4.用Ajax也是可以的

<script type="text/javascript">
    var Ajax = function ()
    {
        $.getJSON ("demo.json", function (data)
        {
            $.each (data, function (i, item)
            {
               console.log(item.name);
            });
        });
    }();
</script>
$.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);
				   }
				}
			})

 

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号