場景
jquery中直接請求本地json文件時會提示跨域問題。
Jsonp(JSON with Padding)
是 json 的一種"使用模式"，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。
為什么我們從不同的域（網站）訪問數據需要一個特殊的技術( JSONP )呢？這是因為同源策略。
同源策略，它是由 Netscape 提出的一個著名的安全策略，現在所有支持 JavaScript 的瀏覽器都會使用這個策略。
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。
實現
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、效果
