jQuery ajax读取本地json文件_jQuery请求本地JSON文件，在谷歌浏览器运行时报跨域错误_Vscode使用Live Server

柔光的暖阳◎ 2023-09-30 13:29 2阅读 0赞

json文件

{
        
        "first":[
            {
        "name":"张三","sex":"男"},
            {
        "name":"李四","sex":"男"},
            {
        "name":"王武","sex":"男"},
            {
        "name":"李梅","sex":"女"}
        ]
    }

方法一:

$.ajax({
        
       url: "ceshi.json",//json文件位置
       type: "GET",//请求方式为get
       dataType: "json", //返回数据格式为json
       success: function(data) {
        //请求成功完成后要执行的方法 
           //each循环 使用$.each方法遍历返回的数据date
           $.each(data.first, function(i, item) {
        
                var str = '<div>姓名:' + item.name + '性别：' + item.sex + '</div>';
                document.write(str);
           })
       }
    })

方法二:

jQuery.getJSON()是jQuery.ajax()函数的简写形式.

// jQuery.getJSON( url [, data ] [, success ] )
    $.getJSON("ceshi.json", "", function(data) {
        
        　  //each循环 使用$.each方法遍历返回的数据date
           $.each(data.first, function(i, item) {
        
                var str = '<div>姓名:' + item.name + '性别：' + item.sex + '</div>';
                document.write(str);
           })
    });

## jQuery请求本地JSON文件，在谷歌浏览器运行时报跨域错误 ##

通过ajax或者jQuery的$.getJSON请求本地JSON文件，运行在谷歌浏览器时，会报跨域的错误

注：火狐浏览器也会提示错误，但会显示要获取的信息

原因：

访问本地计算机中的文件，使用的是file协议。file协议主要用于访问本地计算机中的文件。

跨源请求只支持协议模式：http、data、chrome、chrome-extension、https

安全原因浏览器不允许跨域访问，安全机制认为加载本地其他文件是跨域行为。谷歌浏览器会报跨域的错误，是由于谷歌浏览器的安全机制不允许

报错：  
![在这里插入图片描述][8be5b78cbab24bb9aca02883fd66e647.png]  
解决方式：

1.使用jsonP

2.根据网上查找有推荐使用webStorm的(没试过)

3.vscode安装使用扩展live-server

注：其它网上方式没试过(eg:反向代理，改谷歌浏览器设置之类的)

注：live Server扩展，安装好后，选择html文件，右击选择Open with Live Server  
![在这里插入图片描述][8bd9dff9b01b442f96b23b9a527b72d0.png]

## 【Vscode插件】LiveServer 安装使用指南 ##

当我们碰到文件引入导致的跨域问题，而测试环境又不存在不同源时，live-server这个插件允许我们起一个前端本地服务，这样子就把资源和网站服务同源了

![img][]

1.左键点击下图圈出的图标或者快捷键Ctrl+Shift+X，到下图的EXTENSIONS界面。

![img][img 1]

2.搜索Live Server点击绿色的Install即可安装，笔者是已经装好了所以才没有Install按钮的。

![img][img 2]

3.安装成功的表示是如下图所示，右键HTML文件有Open with Live Server选项（如果没有这个选项的话，重新开一次VSC，再次导入工程所在文件夹即可）。

![img][img 3]

4.出现右下角5500的默认端口号提示即表示启动完毕。

![img][img 4]

5.在浏览器输入网址：http://127.0.0.1:5500/显示HTML内容。

![img][img 5]

到这一步，Live Server就成功安装并能正常使用了！

## Vscode使用Live Server ##

先安装live Server：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1cWloYXd1Yml0bw_size_16_color_FFFFFF_t_70]

然后使用 CTRL+SHIFT+P ,搜索live server：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1cWloYXd1Yml0bw_size_16_color_FFFFFF_t_70 1]  
点击 `Open with server`就可以打开这个服务器了。  
如果要用这个服务器打开具体的html文件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1cWloYXd1Yml0bw_size_16_color_FFFFFF_t_70 2]

[8be5b78cbab24bb9aca02883fd66e647.png]: https://img-blog.csdnimg.cn/8be5b78cbab24bb9aca02883fd66e647.png
[8bd9dff9b01b442f96b23b9a527b72d0.png]: https://img-blog.csdnimg.cn/8bd9dff9b01b442f96b23b9a527b72d0.png
[img]: https://img-blog.csdnimg.cn/img_convert/fb7a0b61dc37bd769baaa1442ca48d3f.png
[img 1]: https://img-blog.csdnimg.cn/img_convert/2e6e21fb21d81513b9db4a708c919181.png
[img 2]: https://img-blog.csdnimg.cn/img_convert/5472e06a3c9de757a4e51c3b9ad880b1.png
[img 3]: https://img-blog.csdnimg.cn/img_convert/06e803b24119d204415aea8217197f4d.png
[img 4]: https://img-blog.csdnimg.cn/img_convert/03b1a5422f864d7e433b1acff7297a71.png
[img 5]: https://img-blog.csdnimg.cn/img_convert/583e71ec98a14fae12d852d546ede62f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1cWloYXd1Yml0bw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210715205015664.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1cWloYXd1Yml0bw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1cWloYXd1Yml0bw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210715205225785.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1cWloYXd1Yml0bw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1cWloYXd1Yml0bw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210715205531406.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1cWloYXd1Yml0bw==,size_16,color_FFFFFF,t_70