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

irpas 02-07 7293

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

有些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="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>