《js读取本地json文件》及浏览器跨域设置、《js保存json到本地》

最新推荐文章于 2024-04-22 11:48:16 发布

刘贵庆

最新推荐文章于 2024-04-22 11:48:16 发布

阅读量2w

点赞数

分类专栏： js 前端 json 文章标签： json js

本文为博主原创文章，未经博主允许请勿转载，切勿用于商业用途，若有引用请加原文链接。

本文链接：https://blog.csdn.net/xysxlgq/article/details/119568570

版权

前端同时被 3 个专栏收录

56 篇文章 0 订阅

订阅专栏

36 篇文章 1 订阅

订阅专栏

json

11 篇文章 0 订阅

订阅专栏

前述：终于抽出时间，整理了一些编程所需基础知识。

有些js在读取本地文件出现浏览器跨域问题，在此提供解决方法：

(chrome:单独运行html文件有跨域问题目前无法设置，但可以用WebStorm中的Chrome(无法应用请看:彻底卸载chrome:https://blog.csdn.net/xysxlgq/article/details/119598264)。其他：若在应用程序中运行没有浏览器限制，也不用设置。)

火狐浏览器提示：同源策略禁止读取位于 c:/... 的远程资源。（原因：CORS 请求不是 http）
解决方法：跨域设置:
1、打开火狐浏览器：输入"about:config"
2、点击”接受风险并继续”
3、搜索”security.fileuri.strict_origin_policy”,设置为：false
4、关闭浏览器再打开。

注意：加载页面后提示：XML 解析错误：格式不佳，可忽略。
下面为loginfo。

如下所示：

Html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json file</title>
    <!--<script src="jquery-3.6.0.min.js" ></script>-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<body>
<script type="text/javascript">
    $.ajax({
        url: "./JsonFile/Project.json",
        type:'GET',
        dataType:'json',
        success: function(data) {
            var json=eval(data.Project);
            console.log(json);
            for(i=0;i<json.length;i++){
                console.log(json[i].ProjectName);
            }
        }
    });
</script>
</body>
</html>

Project.json

{
  "Project": [
    {
      "id": "ffsde42jj4k2f33gh2ew4eef34545j",
      "ProjectName": "北京xxx招标项目"
    },
    {
      "id": "fhghrree42jj4k2f33gh2ew4eef34545j",
      "ProjectName": "上海xxxx1标造价项目"
    },
    {
      "id": "fhhss2jj4k2f33gh2ew4eef34545j",
      "ProjectName": "天津xxx机电xxx"
    }
  ]
}

二、js保存json到本地：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js保存json到本地</title>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
    var div=document.getElementById('div');
    //生成json数据
    var total = 1000, json = [];
    for(var i = 0; i < total; i++){
        json.push({id:i+"df4"+(i+45)+"urt",column:(i+3)});
    }
    //json转string字符串
    var content = JSON.stringify(json);
    var a = document.createElement('a');
    a.download = "jsonjson.json";
    var blob = new Blob([content]);
    //转blob
    a.href = URL.createObjectURL(blob);
    // 添加到body
    div.appendChild(a);
    //点击
    a.click();
    // 删除a
   // div.removeChild(a);
</script>
</body>
</html>

刘贵庆

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
《js读取本地json文件》及浏览器跨域设置、《js保存json到本地》

前述：终于抽出时间，整理了一些编程所需基础知识。有些js在读取本地文件出现浏览器跨域问题，在此提供解决方法：问题：同源策略禁止读取位于 c:/... 的远程资源。（原因：CORS 请求不是 http）解决方法：跨域设置:1、打开火狐浏览器：输入"about:config"2、点击”接受风险并继续”3、搜索”security.fileuri.strict_origin_policy”,设置为：false4、关闭浏览器再打开。5、谷歌浏览器:我捣鼓了半天没辙，不折腾了。其他：若在应用程序中运行
复制链接

扫一扫