快捷導(dǎo)航

利用jsonp解決js讀取本地json跨域的問題

更新時(shí)間：2018年12月11日 08:08:54 作者：Hank_謝旱

這篇文章主要給大家介紹了關(guān)于利用jsonp解決js讀取本地json跨域的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

一、問題描述

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

跨域報(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); 
   }
  })

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

二、解決跨域問題

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

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

所以 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 語言里對(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ù)可以簡寫為 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"
  }
 ]
 )

三、注意