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