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

36 篇文章 1 订阅
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
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax是一种用于在网页上进行异步通信的技术,可以通过发送HTTP请求来获取数据或更新页面内容。然而,由于同源策略的限制,我们通常无法直接在网页上通过Ajax请求跨域的资源,包括本地的JSON文件跨域请求本地的JSON文件并不常见,因为同源策略主要用于防止恶意行为和安全问题。但是有时我们可能遇到需要跨域请求本地JSON文件的情况,例如在开发过程中需要模拟服务器返回的数据。 要实现跨域请求本地的JSON文件,可以通过以下几种方式: 1. JSONP(JSON with Padding) JSONP是一种通过动态创建<script>标签,实现跨域访问的方法。在本地JSON文件中,我们可以通过在JSON数据外面包裹一个函数调用来返回数据。 例如,在本地JSON文件中添加如下代码: ```javascript jsonpCallback({"name": "John", "age": 25}); ``` 然后在网页上使用Ajax请求: ```javascript function jsonpCallback(data) { console.log(data); } var script = document.createElement('script'); script.src = 'local.json?callback=jsonpCallback'; document.body.appendChild(script); ``` 这样就可以通过JSONP方式跨域请求并获取本地的JSON数据。 2. CORS(Cross-Origin Resource Sharing) CORS是一种通过在服务器端设置响应头来实现跨域访问的方法。在本地JSON文件中,我们需要在服务器端设置Access-Control-Allow-Origin响应头,允许指定域名的跨域请求。 例如,在服务器端的响应头中添加如下代码: ```javascript Access-Control-Allow-Origin: http://example.com ``` 然后在网页上使用Ajax请求: ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'local.json', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); console.log(data); } }; xhr.send(); ``` 这样就可以通过CORS方式跨域请求并获取本地的JSON数据。 总结:通过使用JSONP或CORS方式,我们可以实现跨域请求本地的JSON文件JSONP通过创建<script>标签,而CORS则通过在服务器端设置响应头,使得跨域请求合法化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值