JSONP使用

Posted 2020-09-27 小强灰灰

一、什么是JSONP

jsonp是一种规则，它是利用创建html的script快的方式，将远端url放到src属性中，并以函数的形式执行远程返回值中的函数。

jsonp的出现是为了解决浏览器同源策略的限制（跨域访问）

 

二、实现例子

1、原理性实现

def jsonp(request):
    name = request.GET.get(‘callback‘)
    return HttpResponse("%s(‘要返回的内容‘)" % (name,))

服务端代码

 

function submitJsonp() {
        var tag = document.createElement(‘script‘);
        tag.src = ‘http://域名/index.html?callback=func‘;
        document.head.appendChild(tag);
        document.head.removeChild(tag);
 }

#此函数是来自于url访问后得到远端返回值的数据
 function func(arg) {
        $(‘#content‘).html(arg);
 }

客户端代码

 

2、利用ajax方式实现

function submitJsonp() {
        $.ajax({
            url: ‘http://域名/index.html‘,
            type: ‘GET‘, //不管这里写get或post，都会以get方式提交到远端服务端
            dataType: ‘jsonp‘,
            jsonp: ‘callback‘,
            jsonpCallback: ‘func‘
        })
}

function func(arg) {
        console.log(arg);
}

ajax方式实现jsonp