python+ajax+jsonp具体实现，基于jQuery实现的python服务端的jsonp跨域请求方案

最新推荐文章于 2024-08-13 18:29:56 发布

劲枫

最新推荐文章于 2024-08-13 18:29:56 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 Python Web 文章标签：父页面与iframe通信跨域的解决方案 jsonp跨域通信

本文链接：https://blog.youkuaiyun.com/TCF_JingFeng/article/details/80066769

前端同时被 2 个专栏收录

60 篇文章

订阅专栏

Python Web

11 篇文章

订阅专栏

本文介绍了一种使用JSONP实现跨域请求的方法，并提供了前后端代码示例。通过两个版本的示例展示了如何设置前端请求及后端响应来完成跨域数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：在代码中已经做好了注释，细看理解再实践，这里用的后端是python，其他语言逻辑是一样的

1、版本one

前端（设置端口与后端不同，与后端不再一个频道～，跨域了）：

<script>
window.onload=function () {
   $.ajax({
       url: 'http://127.0.0.1:9000/ajaxjupyter',//http://127.0.0.1:9000/ajaxjupyter?callbackfun=jsonpCallback&temp_result=temp_result
       type: 'get',
       dataType: 'jsonp',
       jsonp:"callbackfun",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
       jsonpCallback:"jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名,如果定义了就success:function(){}就失效
       data: {
           temp_result:“123123123”
       },
   });
}

 function jsonpCallback(data) {//处理返回信息的函数
           console.log(data)
       }
</script>

后端（端口9000，与前端不再一个频道～，跨域了）：

class AjaxjupyterHandler(HomeHandler):
    def get(self):
        temp_result = self.get_argument("temp_result", "")
        callbackfun = self.get_argument("callbackfun", "") #接受callback的名字callbackfun=jsonpCallback

        res = dict()
        res["status"] = 0
        res["info"] = "添加成功"
        res["temp_result"] = temp_result

        self.set_header("content-type", "application/json")
        data = json.dumps(res)
        self.write(''+callbackfun+'('+data+')')

2、版本two(简化版)

前端（与后端不再一个频道～，跨域了）：

<script>
   window.onload=function () {
   $.ajax({
       url: 'http://127.0.0.1:9000/ajaxjupyter',
       //http://127.0.0.1:9000/ajaxjupyter?callback=一串随机数就在不用关心是什么，这个随机数是用来调用success：function(){}的&temp_result=temp_result
       type: 'get',
       dataType: 'jsonp',

       data: {
           temp_result:“12312312312”
       },
       success:function (data) {
           console.log(data)
       }
   });
}
</script>

后端python版本（与前端不再一个频道～，跨域了）：

class AjaxjupyterHandler(HomeHandler):
    def get(self):
        temp_result = self.get_argument("temp_result", "")
        callback_test = self.get_argument("callback", "")
        # 前端没定义jsonp的值，是默认的jsonp=callback，这里接收的参数叫callback就行，其值赋给callback_test是一串随机数

        res = dict()
        res["status"] = 0
        res["info"] = "添加成功"
        res["temp_result"] = temp_result

        self.set_header("content-type", "application/json")
        data = json.dumps(res)
        self.write(''+callback_test+'(' + data + ')')