前端访问本地json小结

在前端我们通过jquery 获取数据我们最先想到的是

$.ajax({
         type: 'get',
           url: './jsondata.json',
           async: false,
           dataType: 'json',
           success: function(data){
               debugger;
           },
           error: function(XMLHttpRequest, textStatus, errorThrown) {
               debugger;
           }
       })

but 在浏览器上运行会报错：
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

报错信息：浏览器不支持跨域
通俗的讲，浏览器有一个很重要的安全机制，即为同源策略：不用域的客户端脚本在无明确授权的情况下不能读取对方资源，跨域也就是不同源。

那我们就要问了，那咋办
两种解决思路：1.将你的json 文件放到跟js文件 相同服务器下，通过 请求接口的形式解决 （这个不详细说明）

2.通过jsonp 形式解决 （只支持Get方式） ==》 借鉴前辈们的做法
json.html

jsondata.js

function train (result){  
    console.log(result)  
}

train.json

train({  
    "status": "success",  
    "trainSystem": [  
        {  
            "key": "BX7",  
            "name": "BX7",  
            "img": ""  
        },  
        {  
            "key": "BX5",  
            "name": "BX5",  
            "img": ""  
        },  
        {  
            "key": "BX6",  
            "name": "BX6",  
            "img": ""  
        }  
    ]  
}) 

该方式确实可行,但是我不满意，还在探索同源问题的解决方式。。。

下面顺便说一下在vue 上请求json 里面数据的方式

loaddata.json(注意该文件放在static 文件夹下，请求的时候注意目录结构)

[{"name": "xxx", "age": 25}]

亲测可用