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

2019-11-19 12:21:58

字體：大中小

來源：轉載

供稿：網友

前言

本文主要給大家介紹了關于使用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請求）

實現原理：

所以 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"  } ] )

三、注意