本地写json数据并在页面中调用

这里我自己写的是两个方法，一种是用js文件中写的，一种是在json文件中写的。

js文件：

var workData = {
    "firstWork":{
        "companyName":"",
            "time":"",
            "department":"",
            "position":"",
            "project":[
            {
                "name":"",
                "time":"",
                "content":"",
                "technology":""
            }
        ]
    },
    "secondWork":{
        "companyName":"",
            "time":"",
            "department":"",
            "position":"",
            "project":[
            {
                "name":"",
                "time":"",
                "content":"",
                "technology":""
            }
        ]
    },
    "thirdWork":{
        "companyName":"",
            "time":"",
            "department":"",
            "position":"",
            "project":[
            {
                "name":"",
                "time":"",
                "content":"",
                "technology":""
            }
        ]
    },
    "fourthWork":{
        "companyName":"",
            "time":"",
            "department":"",
            "position":"",
            "project":[
            {
                "name":"",
                "time":"",
                "content":"",
                "technology":""
            }
        ]
    }
}

可以在html文件中调用    <script src="路径 + json.js"></script>      之后可以用console.log(workData)看一下，可以成功调用。

json文件：

{
  "firstWork":{
    "companyName":"",
    "time":"",
    "department":"",
    "position":"",
    "project":[
      {
        "name":"",
        "time":"",
        "content":"",
        "technology":""
      }
    ]
  },
  "secondWork":{
    "companyName":"",
    "time":"",
    "department":"",
    "position":"",
    "project":[
      {
        "name":"",
        "time":"",
        "content":"",
        "technology":""
      }
    ]
  },
  "thirdWork":{
    "companyName":"",
    "time":"",
    "department":"",
    "position":"",
    "project":[
      {
        "name":"",
        "time":"",
        "content":"",
        "technology":""
      }
    ]
  },
  "fourthWork":{
    "companyName":"",
    "time":"",
    "department":"",
    "position":"",
    "project":[
      {
        "name":"",
        "time":"",
        "content":"",
        "technology":""
      }
    ]
  }
}

可以使用ajax来调用

$.ajax({
    url: "路径 + 名称.json",//json文件位置
    type: "post",
    dataType: "json", //返回数据格式为json
    success: function(data) {//请求成功完成后要执行的方法
        console.log(data)
    }
})

注：现在谷歌浏览器有安全机制，无法访问获取本地的文件，会有提示跨域，可以用火狐浏览器

或者使用VSCODE的插件Live Server启动本地服务，就可以访问了