利用jsonp解决js读取本地json跨域的问题

2024-08-02 02:13: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"
  }
 ]
 )

三、注意

一定要在json文件的外部用函数名+（）套住；
js中的回调函数一定要与json中函数名相同；

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

ajax和jsonp跨域的原理本质详解

为什么会有跨域问题? - 因为有同源策略同源策略是浏览器的一种安全策略,所谓同源指的是请求URL地址中的协议, 域名和端口都相同,只要其中之一不相同就是跨域同源策略主要为了保证浏览器的安全性在同源策略下,浏览器不允许 Ajax跨域获取服务器数据 http://www.example.com/detail.html 跨域请求: http://api.example.com/detail.html 域名不同 http://www.example.com:8080/detail.ht
jsonp跨域获取数据的基础教程

前言由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域 (1) jsonp原理由于script标签的src属性可以访问非同源的js脚本,所以通过src属性访问服务器会返回函数的js代码,而我们想要的数据就作为函数参数返回,而我们会先定义这个函数,返回的js代码就可执行 (2) jsonp实现代码请求页面 <!DOCTYPE html> <html> <head> <title></titl
基于vue-resource jsonp跨域问题的解决方法

最近在学习vue.js 碰到个ajax跨域请求的问题,之前知道可以用jsonp解决,但是一直没实践过,这次用发现里面好多问题,所以现在记录下来,希望可以给刚接触使用jsonp的同学一点帮助! 关于什么是jsonp,以及为什么要用jsonp我就不多说了,不明白的同学自行百度一下. 我们先来说一下jQuery里面的jsonp请求,这搞懂了 vue-resource 里面的jsonp就容易明白了. 这里我以json数据为例,首先我们通过 $.get可以直接得到一个我们想要的对象,但是用 jsonp 就
原生js的ajax和解决跨域的jsonp(实例讲解)

最近慢慢感觉,学再多框架,库,都不如老老实实先把基础弄扎实了. 不说废话,先上一个用ajax请求下本地的一个.txt文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload =function(){ var oBtn = d
快速解决跨域请求问题:jsonp和CORS

网上各种跨域教程,各种实践,各种问答,除了简单的 jsonp 以外,很多说 CORS 的都是行不通的,老是缺那么一两个关键的配置.本文只想解决问题,所有的代码经过亲自实践. 本文解决跨域中的 get.post.data.cookie 等这些问题. 本文只会说 get 请求和 post 请求,读者请把 post 请求理解成除 get 请求外的所有其他请求方式. JSONP JSONP是利用浏览器对script的资源引用没有同源限制,通过动态插入一个script标签,当资源加载到页面后会立即执行的原
跨域解决之JSONP和CORS的详细介绍

JSONP跨域和CORS跨域什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略同源策略:域名.协议.端口均相同. 浏览器执行JavaScript脚本时,会检查这个脚本属于那个页面,如果不是同源页面,就不会被执行. JSONP跨域只支持GET请求,不支持POST等其它请求,也不支持复杂请求,只支持简单请求. CORS跨域支持所有的请求,包含GET.POST.OPTOIN.PUT.DELETE等.既支持复杂请求,也支持简单请求
利用jsonp与代理服务器方案解决跨域问题

前言本文将从实践角度介绍如何使用jsonp和代理服务器方案解决跨域问题,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 浏览器为了保护用户安全,引入了同源策略,即一个服务器页面无法访问另一个协议.域名.端口不同的服务器数据.当页面需要跨服务器访问另一个服务器的数据时,即产生跨域行为.以豆瓣的公开API(https://api.douban.com/v2/book/1220562)为例,当前我的服务器处于http://127.0.0.1:5000下,豆瓣的服务器很显然跟我的服务
跨域请求两种方法 jsonp和cors的实现

在网站后台跨域访问另一服务器时,若被访问服务器未设置response['Access-Control-Allow-Origin'] = '*' 那么将无法获取. jsonp方法伪造ajax提交请求请求端 // 基于jsonp // 原理: ajax 不能直接跨域 . //向html中加入script标签含有访问路径,script标签直接访问路径达到效果 $('.get_service2').click(function () { // 伪造ajax提交请求 $.ajax({ url:'ht
轻松搞定jQuery+JSONP跨域请求的解决方案

JSONP(JSON with Padding)是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSONP 抓到的资料
使用jquery的jsonp如何发起跨域请求及其原理详解

前言本文主要给大家介绍的是关于jquery jsonp发起跨域请求及其原理的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具有相同的源,否则就是不同源的. 如果要在js里发起跨域请求,则要进行一些特殊处理了.或者,你可以把请求发到自己的服务端,再通过后台代码发起请求,再将

利用jsonp解决js读取本地json跨域的问题

相关推荐

随机推荐