Jquery中使用JsonP加载本地json文件解决跨域问题
生活随笔
收集整理的這篇文章主要介紹了
Jquery中使用JsonP加载本地json文件解决跨域问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景
jquery中直接請求本地json文件時會提示跨域問題。
?Jsonp(JSON with Padding)
?是 json 的一種"使用模式"，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。
為什么我們從不同的域（網站）訪問數據需要一個特殊的技術( JSONP )呢？這是因為同源策略。
同源策略，它是由 Netscape 提出的一個著名的安全策略，現在所有支持 JavaScript 的瀏覽器都會使用這個策略。
注：
博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
1、本地新建一個json文件，叫user.json
??? {"name":"公眾號","sex":"男","email":"badao@123.com"},{"name":"霸道的程序猿","sex":"男","email":"badao@123.com"},{"name":"歡迎關注","sex":"女","email":"badao@123.com"}上面是原json數據格式。
2、使用JsonP需要在json數據中使用"回調方法()"將json數據包括起來。
其中回調方法名是自定義的，只需要保持一致就行。比如這里就叫train
train([{"name":"公眾號","sex":"男","email":"badao@123.com"},{"name":"霸道的程序猿","sex":"男","email":"badao@123.com"},{"name":"歡迎關注","sex":"女","email":"badao@123.com"} ] )3、然后引入jquery
?<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>4、在script中聲明回調函數
??? <script type="text/javascript">//回調函數function train(data){console.log(data);}</script>注意這里的回調函數名字與上面包括的一致。
然后data中就可以獲取到json數據。
5、使用如下格式引入json數據
<script src="data/user.json?cb=train"></script>這里的cb代表callback回調，后面跟的是上面一致的回調方法名。
前面是json文件的路徑。
6、注意這里要先將回調方法聲明，再引入json文件，不然會提示回調方法未定義
7、完整示例代碼
? <!doctype html> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Jquery 加載 本地Json數據</title> </head><body><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">//回調函數function train(data){console.log(data);}</script><script src="data/user.json?cb=train"></script> </body></html>?8、效果
?
總結
以上是生活随笔為你收集整理的Jquery中使用JsonP加载本地json文件解决跨域问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android中使用WebChromeC
- 下一篇： Geoserver中调整polygon图