前言
本文主要給大家介紹了關于使用jsonp解決js讀取本地json跨域的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧
一 、問題描述
通過ajax方式讀取本地json文件，谷歌瀏覽器會提示跨域錯誤，導致獲取不到json數據。
 |
跨域報錯.png
ajax獲取json數據代碼：
$.ajax({
url: "file/employeejson.json",//json文件位置
type: "GET",//請求方式為get
dataType: "json", //返回數據格式為json
success: function(data) {//請求成功完成后要執行的方法
console.log(data);
}
})
這段代碼本身沒有錯誤，只是谷歌瀏覽器因為安全問題，攔截這類的訪問。但是在火狐瀏覽器中可以訪問，可以去嘗試一下。
二、解決跨域問題
使用jsonp解決跨域 ：（僅適用于GET請求）
實現原理：
<script> 標簽是不受同源策略的限制的，它可以載入任意地方的 JavaScript 文件，而并不要求同源。
所以 JSONP 的理念就是，我和服務端約定好一個函數名，當我請求文件的時候，服務端返回一段 JavaScript。這段 JavaScript 調用了我們約定好的函數，并且將數據當做參數傳入。非常巧合的一點（其實并不是），JSON 的數據格式和 JavaScript 語言里對象的格式正好相同。所以在我們約定的函數里面可以直接使用這個對象。
直接上代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON文件的調用</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
</head>
<body>
</body>
<script>
//回調函數
function train (data){
console.log(data);
}
</script>
<!--jsonp中 需要注意的是
<script src="file/employeejson.json?cb=train"></script>
src ? 之前為文件地址，? 之后為回調函數callback名稱，
回調函數可以簡寫為 cb , 然后 回調函數 名稱要與JSON文件中的名稱一致
可以在 對應的文件名中看下，如，employeejson.json?callback=train,employeejson.json的 函數名為 train-->
<script src="file/employeejson.json?cb=train"></script>
</html>
//JSON文件
train(
[
{
"name":"xx",
"id":"ww"
}
]
)
三、注意
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
