请求不同域的数据方法:requests Jsonp cors

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

在需要访问不同域的接口的数据的时候，一般有两种方式:

第一种:

使用requests模块,在业务逻辑中直接访问别的域的接口，获取数据,然后将返回的数据显示到前端页面上;

这个时候，数据访问的流程是: 客户端-->server请求其他域的接口--->server接收返回的数据--->将数据显示在前端或其他任意地方

import requestsdef req(request):
response = requests.get('http://php.weather.sina.com.cn/xml.php?city=%B1%B1%BE%A9&password=DJOYnieT8234jlsK&day=0')
# print(response.content) #字节
response.encoding = 'utf-8'
# print(response.text) #字符串
return render(request,'req.html',{'result':response.text})

前端获取接收的字符串如下,是utf-8编码格式的

第二种:

直接使用js在前端页面请求其他域的接口,获取数据,最长用的是jsonp;

jsonp请求的原理:浏览器具有同源策略，对于ajax请求,不接受不同域的数据,而对于script标签没有此约束,在创建script标签的src属性的时候,页面在加载src的链接的时候,也会执行(发送链接的请求)链接的地址,如果链接是http get的接口,会返回对应的数据,这样就实现了获取不同域的接口数据的目的了;

需要注意的是:接口返回的数据,一定要符合js格式,否则数据没有办法被处理,一般我们在src的get请求链接，会携带参数？callback=list,使用callback表示需要被返回的数据的格式,这样就可以在定义专门处理返回的数据的方法了; jsonp只能发送get请求,不能发送其他的请求;

1、使用XMLhttprequest对象发送jsonp请求;

<h1>后台获取的结果</h1>
{{ result }}
<h1>js获取的结果</h1>
<input type="button" value="获取数据" onclick="getContent();">
<div id="container"></div>
<script>
function getContent() {
/*
var xhr = new XMLHttpRequest();
xhr.open('GET','http://php.weather.sina.com.cn/xml.php?city=%B1%B1%BE%A9&password=DJOYnieT8234jlsK&day=0');
xhr.onreadystatechange = function () {
console.log(xhr.responseText);
};
xhr.send()
*/
var tag = document.createElement('script');
tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list_=145376870403'; //在创建src属性的时候，就会发送请求
document.head.appendChild(tag); //加载完script之后，再删除
document.head.removeChild(tag);
} function list(arg) {
console.log(arg);
}
</script>

使用jquery+jsonp请求数据如下，效果和上面的代码相同:

function list(arg) {
console.log(arg);
} function getContent() {
$.ajax({
url : 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list_=145376870403',
type : 'POST', //所有的jsonp都是get请求，即使是post请求，也会转换为get请求;
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback:'list'
})
}

获取数据如下: