JSONP

Posted 2020-11-05 sun96

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JSONP相关的知识，希望对你有一定的参考价值。

def jsonp(request):

    #JSONP存在的原因是浏览器具有同源(域名)策略 (浏览器阻止Ajax,但是无法阻止<script src=‘..‘></script>)
    #奇招:
         #创建script标签
         #src=远程地址
         #返回的数据必须是js格式
         #jsonp只能发GET请求
    response=requests.get(‘http://weatherapi.market.xiaomi.com/wtr-v2/weather?cityId=101121301‘)
    print(response.content)
    response.encoding=‘utf-8‘
    return render(request,‘jsonp.html‘,{‘result‘:response.text})


def jsonpp(request):

    print(request.GET)
    ret =‘‘‘callback(123)‘‘‘
    return HttpResponse(ret)

Views.py

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>后台获取结果</h1>
{{ result }}

<h1>js直接获取结果</h1>
<input type="button" value="获取数据" onclick="getContent();">
<div id="content"></div>


<script src="/static/jquery-1.12.4.js"></script>
<script>
    function getContent() {

        {#    var xhr = new XMLHttpRequest();#}
        {#    xhr.open(‘GET‘,‘http://weatherapi.market.xiaomi.com/wtr-v2/weather?cityId=101121301‘);#}
        {#    xhr.onreadystatechange=function(){#}
        {#        console.log(xhr.responseText);#}
        {#    }#}
        {#    xhr.send();#}
        {#        var tag=document.createElement(‘script‘);#}
        {#        tag.src=‘http://127.0.0.1/jsonpp/?k1=v1&k2=v2‘;#}
        {#        document.head.appendChild(tag);#}
        {#        document.head.remove(tag);#}
        {##}
        {##}
        {#    }#}
        {##}

        //ajax方式
        $.ajax({

            url:‘http://www.jxntv.cn/data/jmd-jxtv2.html‘,
            type:‘POST‘,
            dataType:‘jsonp‘,
            jsonp:‘callback‘,
            jsonCallback:‘list‘

        })
    }

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

</script>

</body>
</html>

html

以上是关于JSONP的主要内容，如果未能解决你的问题，请参考以下文章