JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
注：jsonp的方式只是针对get请求方式，不支持post请求。这也是Jsonp方式的局限性
javaScript 用法
可以通过动态创建script标签或是写入固定的script标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。
html代码：
这里的callback是和后台约定的，两边相同即可。调用的方法为自己自定义的方法
image.png
php代码：
7EBAC307-4925-43C9-A512-DDC16D9E2BE5.png
运行结果：
image.png
jQuery 用法
jQuery本身就支持JSONP，jQuery封装的$.ajax中有一个dataType属性，将该属性设置成dataType:"jsonp"，就能指定按照jsonp方式访问远程服务从而实现JSONP跨域了。
注意：虽然jQuery将JSONP封装在$.ajax中，但是其本质与$.ajax不一样。如果设为dataType: 'jsonp'，这个$.ajax方法就和ajax XmlHttpRequest没什么关系了，取而代之的则是JSONP协议。
| 参数 | 描述 |
|---|---|
| URL | 发送请求的地址 |
| type | 请求方式默认为get |
| dataType | JSONP格式。使用SONP形式调用函数时，例如callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数 |
| jsonp | 在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。 |
| jsonpCallback | 实现跨域请求的时候定义回调函数用的，用于添加自己的回调函数,无此项则回调函数默认为success |
| async | 默认设置为true，所有请求均为异步请求 |
| data | 需要传到后台的数据 |
| success | 成功之后执行的方法 |
HTML代码：
image.png
也可以直接在url里面传递数据
url: "http://10.80.1.211/PHP/json_jsonp/jsonp.php?name=胡自鲜&sex=女",
data:{},
php代码：
image.png
运行结果：
image.png
我的博客链接
更多资源就在我的gitHub：https://github.com/huzixian2017/huzixian2017.github.io
网友评论