简述:
jsonp可以解决$.ajax无法跨域请求的问题,其基本原理是利用web调用js文件不受跨域影响,在html标签中类似<script>、<img>、<iframe>具有src属性的都不会受跨域的影响,jsonp就是利用这个特性,实现对跨域数据请求,需要注意的是,jsonp只能是GET请求。
简单实现
前端代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="http://10.0.0.5/test.js"></script></body></html>
其中test.js是在虚拟机nginx服务器放置的一个js文件,内容为:
alert('this is a test')
访问页面成功弹窗显示:
自定义函数调用
这次我们将远端的js文件写上前端的函数名,达到实现数据交互的功能
前端代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> function Test(data) { alert(data) }</script><script src="http://10.0.0.5/test.js"></script></body></html>
目标js文件
Test('来自远方的问候')
访问页面成功弹窗显示:
动态调用
服务端要是可以动态生成js脚本,这样服务端就可以对客户端发送的请求做验证,从而返回相应的内容。
客户端
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="text"><button onclick="Test()">test</button><script src="jquery.js"></script><script> function Test() { $.ajax({ url:'http://10.0.0.1:8000/index2', data:{'data':$('input').val()}, dataType:'jsonp', Callbacks:'callbacks', jsonpCallback:'fun', }) } function fun(data) { alert(data) }</script></body></html>
服务端(django)
def index2(req): messget = req.GET.get('data') data = req.GET.get('callback')+'("啦啦啦,服务器收到你的数据啦,你发送的是%s")' %messget print(data) return HttpResponse(data)
效果如下,当按下test按钮
备注
对了,还有一种请求也可以跨域,就是服务端返回的数据中HTTP响应报文包含了正确CORS响应头