json文件

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

js

方法一:

$.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

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

报错：

解决方式：

1.使用jsonP

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

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

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

注：live Server扩展，安装好后，选择html文件，右击选择Open with Live Server

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

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

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

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

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

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

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

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

Vscode使用Live Server

先安装live Server：

然后使用 CTRL+SHIFT+P ,搜索live server：

点击 Open with server就可以打开这个服务器了。
如果要用这个服务器打开具体的html文件：