JSONP 跨域Ajax请求，利用js对获取到的数据进行处理.

先看看获取到的数据:

前端内容ajax 使用jsonp跨域请求方式,理解如下：

JSONP本质: 利用script标签src跨域访问，获得一个回调函数，再利用回调函数参数内容获取返回的数据args

img src 亦可以， Form src会被本地同源策略阻止XMLHttpRequest阻止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP跨域请求</title>
</head>
<body>
<input type="button" onclick="jsonp1()" value="jsonp跨域请求"></button>
<div id="parent_div">

</div>
<script src="/static/jquery-3.3.1.min.js"></script>
<script>
    function jsonp1(){
        $.ajax({
            url: "http://www.jxntv.cn/data/jmd-jxtv2.html",
            type:"GET", //JSONP只能发送get请求，默认GET
            data:{uid:1},
            dataType:"jsonp",
            jsonp:"callback",
            //回调函数用list包裹
            jsonpCallback:"list"
        });
    }
    //取出包裹到list函数中的值
    function list(args){
        console.log(args);
        console.log(args["data"])
        for (var i = 0; i<args["data"].length; i++){
            for (var j = 0; j < args["data"][i]["list"].length;j++){
                //alert(args["data"][i]["list"][j]["name"])
                tar = document.createElement("span");
                tar.innerHTML = args["data"][i]["list"][j]["name"];
                document.getElementById("parent_div").appendChild(tar);
            }
        }
        //$("#parent_div").html(obj.data)
    }
</script>
</body>
</html>

后台views.py数据：

from django.shortcuts import render,HttpResponse
import uuid,os,json

def jsonp(request):
    return render(request,"jsonp.html")

本文参考老男孩教学资料，感谢.

JSONP 跨域Ajax请求，利用js对获取到的数据进行处理.

猜你喜欢