源自：http://www.cnblogs.com/yuanchenqi/articles/5997456.html
1.同源策略机制
所谓同源是指域名,协议,端口相同，浏览器界面A想访问界面B，就要保证同源。如http://127.0.0.1:8888
2.jsonp(json+padding,padding是一个填充，在jsonp方式中，服务端返回的一定是A(a)，A为函数名，a为填充对象。jsonp只能通过get请求)
2.1 jsonp的js实现
同一个Django文件，分别用8000端口和8002端口打开。浏览器输入127.0.0.1：8000/login,返回8000端口的index.html界面，然后通过src在进入到8002端口的get_byjsonp函数
----------index.html
<script> function fun1(arg){ alert("hello"+arg) } </script> <script src="http://127.0.0.1:8002/get_byjsonp/"></script> //返回：<script>fun1("yuan")</script>，执行fun1("yuan")函数
---------------views.py
def login(req): print("hrllo ajax") return render(req,"index.html") def get_byjsonp(req): print("8002") return HttpResponse("fun1(‘yuan‘)") //jsonp对象
---------------urls.py
urlpatterns = [ path(‘admin/‘, admin.site.urls), path(‘login/‘,views.login), path(‘get_byjsonp/‘,views.get_byjsonp), ]
2.2 jsonp的js动态创建
-------------index.html
<button onclick="f()">submit</button> <script> function addScriptTag(src){ //动态创建script标签 var script = document.createElement(‘script‘); //创建标签<script> script.setAttribute("type","text/javascript"); //设置属性<script type="text/javascript"> script.src = src; // document.body.appendChild(script); //</script> document.body.removeChild(script); } function fun1(arg){ // alert("hello"+arg) } function f(){ addScriptTag("http://127.0.0.1:8002/get_byjsonp/") //返回：<script>fun1("yuan")</script>，执行fun1("yuan")函数
} </script>
---------------views.py
def login(req): print("hrllo ajax") return render(req,"index.html") def get_byjsonp(req): print("8002") return HttpResponse("fun1(‘yuan‘)") //jsonp对象
2.3 (callback=...键值对传给服务端)
------------------index.html
<button onclick="f()">submit</button> <script> function addScriptTag(src){ //得到<script>SayHi("yuan")</script> var script = document.createElement(‘script‘); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script); document.body.removeChild(script); } function SayHi(arg){ alert("Hello "+arg) } function f(){ addScriptTag("http://127.0.0.1:8002/get_byjsonp/?callbacks=SayHi") //callbacks=SayHi键值对传给服务端 } </script> ----------------------views.py def get_byjsonp(req): func=req.GET.get("callbacks",None) //得到SayHi函数名 return HttpResponse("%s(‘yuan‘)"%func)
3.1 jsonp的jQuery实现
---------------index.html
<script type="text/javascript"> $.getJSON("http://127.0.0.1:8002/get_byjsonp?callback=?",function(arg){ //callback=?中的?是一堆看不懂的字符串 alert("hello"+arg) }); </script>
------------------views.py
def login(req):
print("hrllo ajax")
return render(req,"index.html")
def get_byjsonp(req):
print("8002")
callback=req.GET.get("callback",None) //callback=“xxxxxxx”
return HttpResponse("%s(‘ff‘)"%callback)
4.1 jsonp的Ajax实现
<script type="text/javascript" src="/static/jquery-2.2.3.js"></script> <script type="text/javascript"> $.ajax({ url:"http://127.0.0.1:8002/get_byjsonp", dataType:"jsonp", jsonp: ‘callbacks‘, // jsonpCallback:"SayHi" //和上边一句合成键值对callbacks="SayHi"发送给服务端 }); function SayHi(arg){ alert(arg); } </script> #--------------------------------- views.py def get_byjsonp(req): callback=req.GET.get(‘callbacks‘) //得到函数名SayHi print(callback) return HttpResponse(‘%s("yuan")‘%callback)
4.2 jsonp的Ajax回调函数实现
<script type="text/javascript" src="/static/jquery-2.2.3.js"></script> <script type="text/javascript"> $.ajax({ url:"http://127.0.0.1:8002/get_byjsonp", dataType:"jsonp", //必须有，告诉server，这次访问要的是一个jsonp的结果。 jsonp: ‘callbacks‘, //jQuery帮助随机生成的：callbacks="wner" success:function(data){ alert(data) } }); </script> #-------------------------------------http://127.0.0.1:8002/get_byjsonp def get_byjsonp(req): callbacks=req.GET.get(‘callbacks‘) print(callbacks) #wner return HttpResponse("%s(‘yuan‘)"%callbacks)
原文：https://www.cnblogs.com/gaoyukun/p/9043054.html