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

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

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

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

[ 
"name":"张三", 
"sex":"男", 
"email":"[email protected]" 
"name":"李四", 
"sex":"男", 
"email":"[email protected]" 
"name":"王五", 
"sex":"女", 
"email":"[email protected]" 
] 

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赋值给定义好的变量