jsonp完美解决跨域问题,简单

最新推荐文章于 2024-04-14 22:43:02 发布

jayLog

最新推荐文章于 2024-04-14 22:43:02 发布

阅读量794

点赞数

分类专栏： js 文章标签： javascript jquery php ajax

本文链接：https://blog.csdn.net/jayLog/article/details/104274132

版权

js 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

首先虽然jquery把它归在了ajax里，但jsonp不是ajax。因为它是个协议，它本身也是同步的；
直接上个例子：
服务端(php)：

<?php

//json数据
$json_data = [
    'name'=>'kervi',
    'age'=>'23',
    'hobby'=>'play code',
    'status'=>'(*^▽^*)'
];
//转化为json数据
$json_data = json_encode($json_data);

//输出jsonp格式的数据；即函数名(参数)
echo   "jsoncallback(" . $json_data . ")";
//jsoncallback({'name':'kervi'...});

浏览器端(html):

<!DOCTYPE html>
<html>
	<head></head>		

	<script>
	//1.这里的函数名和服务端回调函数名一致就行；
  function jsoncallback(data){
	 console.dir(data);
  }
 </script>
 // 2.加载后端文件
 <script type='text/javascript' src="https://me.kervi.cn/v1/datas/jsondata.php"></script>

我们来看一下结果打印；
在这里插入图片描述

顺序被排序了，但结果是获取到了；

写在最后，(原理)

这种方式之所以可行，关键在
<script type='text/javascript' src="..."></script>
这句引入外部js文件

<img src=''>
<video src=''></video>
<script src=''></script>

不难发现，这些都是可以跨域的，但ajax是用过XMLHttpRequest；最基本的,方式就不一样了；因此就可以从这些标签下手(引入)，实现跨域；

如果我们再看
这次我们不打印，看看network里文件引入了什么
在这里插入图片描述

是函数调用！参数就是我们要的数据；我们前面定义了这个函数了；

那么假设文件返回的是
var a = ‘helloworld’;
然后你在最前面引入，后面是不是可以直接引用了；

end

我博客网站放了个接口，去测试一下你的jsonp吧；正常调用就行了

https://me.kervi.cn/v1/datas/jsondata.php

记得为我点赞和关注~

服务端代码
在这里插入图片描述

jayLog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jsonp完美解决跨域问题,简单

首先虽然jquery把它归在了ajax里，但jsonp不是ajax。因为它是个协议，它本身也是同步的；直接上个例子：服务端(php)：<?php//json数据$json_data = [ 'name'=>'kervi', 'age'=>'23', 'hobby'=>'play code', 'status'=>'(*^▽^...
复制链接

扫一扫