Jquery Ajax客户端跨域请求以及服务端Python代码实现

最新推荐文章于 2025-05-28 23:22:57 发布

原创最新推荐文章于 2025-05-28 23:22:57 发布 · 4.6k 阅读

2 ·

CC 4.0 BY-SA版权

Python 同时被 2 个专栏收录

19 篇文章

订阅专栏

Jquery

1 篇文章

订阅专栏

本文详细介绍了AJAX如何通过JSONP技术实现跨域请求，包括$.ajax()方法、jQuery.getScript()与getJSON()的用法，并通过Python服务端示例解释了如何处理JSONP请求。

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

ajax要在各种浏览器下都实现完美的跨域需要借助于jsonp技术，jsonp实质是请求一个js脚本文件，在js文件载入完毕时执行某个函数，这样就可以完美的规则跨域问题了。

一、$.ajax()

什么是jsonp格式呢？API原文：如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理，根据客户端提交的callback的参数，返回一个callback(json)的数据，而客户端将会用script的方式处理返回数据，来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。

前台客户端

var even_io = function() {
    $.ajax({
        type: "GET",
        url: "{{ path }}" + "check_in",
        dataType : "jsonp",                        // 跨域请求使用jsonp数据类型
        jsonp: "callbackparam",                    // 需要返回的函数命变量的变量名
        jsonpCallback: "success_jsonpCallback",    // 需要返回的函数命变量的变量值
        data: { data: data },
        success: function(data) {
            // 正确返回式的执行函数内容
        }
    });
};

发送请求的形式为："GET /check_in?callbackparam=success_jsonpCallback&my_extension=8001&_=1380513834724 HTTP/1.1"

后台服务端（Python）

buf = []
status = ''         
customer_id = ''     
try:
    extension = request.GET['data']
    // 具体函数体
except Exception, e:
    status = 'false'
    customer_id = '0'
data = json.dumps(dict(status=status, customer_id=customer_id))

// 返回前台的参数实际上为一个以给定参数值命名的函数，函数的参数为具体返回的内容

return HttpResponse('success_jsonpCallback(' + data + ');')

二、jQuery.getScript()

只支持get方式请求，格式：jQuery.getScript(url, function() {...});

jQuery.getScript("http://xxxx/xx.php?param1=value1&param2=value2",
function(){
...
});

服务端程序与$.ajax()类似

三、jQuery.getJSON()

由于getScript在IE下有一些BUG，或者说效率问题。把服务器整崩溃了，于是又使用了getJSON。getJSON在IE下会有安全提示，而非IE则完全显示不出，需要使用callback。

getJSON和getScript一样的用法，区别只是回调函数有个参数返回值

格式：jQuery.getJSON("url?jsoncallback=?", {"data": xxx}, function(data) {...});

jQuery.getJSON("http://xxxx/xxx?jsoncallback=?",

{"data": xxx},
function(data){