什么是JSONP？

最新推荐文章于 2022-11-13 18:59:58 发布

柠檬茶oline

最新推荐文章于 2022-11-13 18:59:58 发布

阅读量142

点赞数

分类专栏： django python html

本文链接：https://blog.csdn.net/weixin_44307721/article/details/95192419

版权

django 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

python

6 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

什么是JSONP？

简述

jsonp可以解决$.ajax无法跨域请求的问题，其基本原理是利用web调用js文件不受跨域影响，在html标签中类似<\script>、<\img>、<\iframe>具有src属性的都不会受跨域的影响，jsonp就是利用这个特性，实现对跨域数据请求，需要注意的是，jsonp只能是GET请求。

简单实现

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="http://10.0.0.5/test.js"></script>
</body>
</html>

其中http://10.0.0.5/test.js是在虚拟机nginx服务器放置的一个js文件，内容为:

alert('this is a test')

访问页面成功弹窗显示:
在这里插入图片描述

自定义函数调用

这次我们将远端的js文件写上前端的函数名，达到实现数据交互的功能

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    function Test(data) {
        alert(data)
    }
</script>

<script src="http://10.0.0.5/test.js"></script>
</body>
</html>

目标js文件

Test('来自远方的问候')

访问页面成功弹窗显示：
在这里插入图片描述

动态调用

服务端要是可以动态生成js脚本，这样服务端就可以对客户端发送的请求做验证，从而返回相应的内容。

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button onclick="Test()">test</button>

<script src="jquery.js"></script>
<script>

    function Test() {
        $.ajax({
            url:'http://10.0.0.1:8000/index2',
            data:{'data':$('input').val()},
            dataType:'jsonp',
            Callbacks:'callbacks',
            jsonpCallback:'fun',

        })
    }

    function fun(data) {
        alert(data)
    }

</script>
</body>
</html>

服务端(django)

def index2(req):
    messget = req.GET.get('data')
    data = req.GET.get('callback')+'("啦啦啦,服务器收到你的数据啦,你发送的是%s")' %messget
    print(data)
    return HttpResponse(data)

效果如下，当按下test按钮
在这里插入图片描述

备注

对了，还有一种请求也可以跨域，就是服务端返回的数据中HTTP响应报文包含了正确CORS响应头

柠檬茶oline

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
什么是JSONP？

什么是JSONP？简述简单实现自定义函数调用动态调用备注简述jsonp可以解决$.ajax无法跨域请求的问题，其基本原理是利用web调用js文件不受跨域影响，在html标签中类似<\script>、<\img>、<\iframe>具有src属性的都不会受跨域的影响，jsonp就是利用这个特性，实现对跨域数据请求，需要注意的是，jsonp只能是GET请求。简...
复制链接

扫一扫