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

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

注：浏览器是肯定不能获取用户浏览器客户机的本地文件的，所以这个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.我的文件位置

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

https html 网络安全 json javascript

0 人点赞