跨域请求两种方法 jsonp和cors的实现
在网站后台跨域访问另一服务器时，若被访问服务器未设置response[‘Access-Control-Allow-Origin']=‘*'那么将无法获取。
jsonp方法
伪造ajax提交请求
请求端
//基于jsonp
//原理：ajax不能直接跨域。
//向html中加入script标签含有访问路径，script标签直接访问路径达到效果
$('.get_service2').click(function(){
//伪造ajax提交请求
$.ajax({
url:'http://127.0.0.1:8001/service/',
type:'get',
dataType:'jsonp',//伪造ajax基于script
jsonp:'callbacks',
//随机取一个函数名发给请求方，对方解析好后返回过来
success:function(data){
console.log(data)
}
})
});
服务端
importjson
defservice(request):
#等待请求返回json数据
func=request.GET.get('callbacks')#固定方法名jsonp
info={'name':'zok','age':18}
returnHttpResponse("%s('%s')"%(func,json.dumps(info)))
jsonp获电视台节目案例
取到后并渲染到页面上
//实例基于jsonp电视台节目获取
$('.get_service3').click(function(){
//伪造ajax基于script
$.ajax({
url:'http://www.jxntv.cn/data/jmd-jxtv2.html',
type:'get',
dataType:'jsonp',//伪造ajax基于script
jsonp:'callbacks',
jsonpCallback:'list',//拼函数名，如果不写就随机发一个函数名，对面解析好发回来
success:function(data){
varhtml="";//自己拼接
//循环取出数据index索引计次，weekday每一天必须要2个参数
$.each(data.data,function(index,weekday){
//取到每天的数据
html+=''+weekday.week+'
';
$.each(weekday.list,function(i,show){
html+=''+show.name+''
})
});
$('body').append(html)
}
})
})
cors最简单的方法
需要在服务端上加入白名单ponse[‘Access-Control-Allow-Origin']=‘*'设置好能正常传送的ip
服务端
defserviceCors(request):
"""
基于cors跨域
白名单域名
"""
info={'name':'zok','age':18}
response=HttpResponse(json.dumps(info))
#设置指定ip或*全部通过
response['Access-Control-Allow-Origin']='http://127.0.0.1:8000'
response['Access-Control-Allow-Origin']='*'
returnresponse
请求端
//cors跨域请求，方法最简单
$('.get_service1').click(function(){
$.ajax({
url:'http://127.0.0.1:8001/serviceCors/',
type:'get',
success:function(data){
console.log(data)
}
})
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。