《js读取本地json文件》及浏览器跨域设置、《js保存json到本地》
生活随笔
收集整理的這篇文章主要介紹了
《js读取本地json文件》及浏览器跨域设置、《js保存json到本地》
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前述：終于抽出時間，整理了一些編程所需基礎知識。
有些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]);//轉bloba.href = URL.createObjectURL(blob);// 添加到bodydiv.appendChild(a);//點擊a.click();// 刪除a// div.removeChild(a); </script> </body> </html>總結
以上是生活随笔為你收集整理的《js读取本地json文件》及浏览器跨域设置、《js保存json到本地》的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 硬盘安装Linux救援系统,硬盘安装li
- 下一篇： html edge浏览器 图片,浏览器时