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

首先虽然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

**

记得为我点赞和关注~

**

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

发布了15 篇原创文章 · 获赞 4 · 访问量 1866

猜你喜欢

转载自blog.csdn.net/jayLog/article/details/104274132