溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

利用jsonp解決js讀取本地json跨域的問(wèn)題

發(fā)布時(shí)間：2020-09-24 08:50:16 來(lái)源：腳本之家 閱讀：828 作者：Hank_謝旱 欄目：web開發(fā)

前言

本文主要給大家介紹了關(guān)于使用jsonp解決js讀取本地json跨域的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧

一 、問(wèn)題描述

通過(guò)ajax方式讀取本地json文件，谷歌瀏覽器會(huì)提示跨域錯(cuò)誤，導(dǎo)致獲取不到j(luò)son數(shù)據(jù)。


利用jsonp解決js讀取本地json跨域的問(wèn)題

跨域報(bào)錯(cuò).png

ajax獲取json數(shù)據(jù)代碼：

$.ajax({
   url: "file/employeejson.json",//json文件位置
   type: "GET",//請(qǐng)求方式為get
   dataType: "json", //返回?cái)?shù)據(jù)格式為json
   success: function(data) {//請(qǐng)求成功完成后要執(zhí)行的方法 
   console.log(data); 
   }
  })

這段代碼本身沒(méi)有錯(cuò)誤，只是谷歌瀏覽器因?yàn)榘踩珕?wèn)題，攔截這類的訪問(wèn)。但是在火狐瀏覽器中可以訪問(wèn)，可以去嘗試一下。

二、解決跨域問(wèn)題

使用jsonp解決跨域 ：（僅適用于GET請(qǐng)求）

實(shí)現(xiàn)原理：

<script> 標(biāo)簽是不受同源策略的限制的，它可以載入任意地方的 JavaScript 文件，而并不要求同源。

所以 JSONP 的理念就是，我和服務(wù)端約定好一個(gè)函數(shù)名，當(dāng)我請(qǐng)求文件的時(shí)候，服務(wù)端返回一段 JavaScript。這段 JavaScript 調(diào)用了我們約定好的函數(shù)，并且將數(shù)據(jù)當(dāng)做參數(shù)傳入。非常巧合的一點(diǎn)（其實(shí)并不是），JSON 的數(shù)據(jù)格式和 JavaScript 語(yǔ)言里對(duì)象的格式正好相同。所以在我們約定的函數(shù)里面可以直接使用這個(gè)對(duì)象。

直接上代碼：

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title>JSON文件的調(diào)用</title> 
  <script type="text/javascript" src="jquery-1.11.2.min.js"></script>  
 </head> 
 <body> 
 </body> 
 <script>
    //回調(diào)函數(shù)
  function train (data){ 
     console.log(data);
  } 
</script>

<!--jsonp中 需要注意的是 
 <script src="file/employeejson.json?cb=train"></script> 
 src ? 之前為文件地址，? 之后為回調(diào)函數(shù)callback名稱， 
回調(diào)函數(shù)可以簡(jiǎn)寫為 cb , 然后 回調(diào)函數(shù) 名稱要與JSON文件中的名稱一致 
可以在 對(duì)應(yīng)的文件名中看下，如，employeejson.json?callback=train,employeejson.json的 函數(shù)名為 train--> 
<script src="file/employeejson.json?cb=train"></script>
</html> 
 //JSON文件 
train(
 [
 {
  "name":"xx",
  "id":"ww"
  }
 ]
 )

三、注意

  • 一定要在json文件的外部用函數(shù)名+（）套住；
  • js中的回調(diào)函數(shù)一定要與json中函數(shù)名相同；

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手