jquery jsonp跨域(django)

方法1

  1. 前端页面:cross_domain.html
<body>
	<script src="/static/js/jquery.js"></script>
	<button id="btn">跨域请求</button>

	<script>
		//预留一个函数,供后端调用
		function print(data){
			console.log('拿到的跨域数据 ' + data)
		}
		
		#页面加载完毕函数
		$(function(){
				$('#btn').click(function(){
					//$.ajax跨域 -jsonp
					$.ajax({
						url:'http://localhost:8000/ajax/cross_server',	//目标跨域地址
						dataType: 'jsonp',
						type: 'get',
						jsonp: 'callback',
						jsonpCallback: 'print',	//预留函数名
				})
		})
</body>
  1. views中
import json

#显示cross_domain.html的函数
def cross_domain(request):
	return render(request,'cross_domain.html')

#处理跨域请求的函数
def cross_domain_server(request):
	func = request.GET.get('callback')	
	d = {'xxx':'xxx'}	#json数据
	#拼接func()返回给前端
	return HttpResponse(func + '(' + json.dumps(d) + ')')
  1. urls
urlpatterns = [
	url(r'^cross_domain$',views.cross_domain),
	url(r'^cross_domain_server$',views.cross_domain_server)
	]

方法2(代码更少)

只需要修改前端如下

<body>
	<script src="/static/js/jquery.js"></script>
	<button id="btn">跨域请求</button>

	$(function(){
		$.ajax({
			url:'http://localhost:8000/ajax/cross_domain_server',
			type:'get',
			dataType:'jsonp',	//指定为跨域访问
			sunccess: function(data){	//靠success回调,data为后端的返回数据
				console.log(data);
			}
	})
</body>

你可能感兴趣的:(Django)