1.跨域問題：
是因為瀏覽器的同源策略是對ajax請求進行阻攔了，但是不是所有的請求都給做跨域，像是一般的href屬性，a標簽什么的都不攔截。
如：
項目一：p1.html
<body> <h1>項目一</h1> <button class="send_jsonp">jsonp</button> <script> $(".send_jsonp").click(function () { $.ajax({ url:"http://127.0.0.1:8080/ajax_send2/", #去請求項目二中的url success:function (data) { console.log(data) } }) }) </script> </body>
p1.py
1 from flask import Flask 2 from flask import render_template,redirect,request,jsonify 3 app = Flask(__name__) 4 5 @app.route("/p1",methods=['POST','GET']) 6 def p1(): 7 return render_template('p1.html') 8 9 10 if __name__ == '__main__': 11 app.run(host='127.0.0.1',port=80)
項目二：p2.py
from flask import Flask from flask import render_template,redirect,request,jsonify app = Flask(__name__) @app.route("/ajax_send2",methods=['POST','GET']) def ajax_send2(): print(222222) return 'hello' if __name__ == '__main__': app.run(host='0.0.0.0',port=8080)
出現了一個錯誤，這是因為同源策略給限制了，這是游覽器給我們報的一個錯
(但是注意，項目2中的訪問已經發生了，說明是瀏覽器對非同源請求返回的結果做了攔截。)
注意：a標簽，form，img標簽，引用cdn的css等也屬於跨域（跨不同的域拿過來文件來使用），不是所有的請求都給做跨域，（為什么要進行跨域呢？因為我想用人家的數據，所以得去別人的url中去拿，借助script標簽）
只有發ajax的時候給攔截了，所以要解決的問題只是針對ajax請求能夠實現跨域請求
解決同源策源的兩個方法：
1、jsonp（將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義。）
jsonp是json用來跨域的一個東西。原理是通過script標簽的跨域特性來繞過同源策略。
借助script標簽，實現跨域請求，示例：
所以只是單純的返回一個也沒有什么意義，我們需要的是數據
如下：可以返回一個字典，不過也可以返回其他的（簡單的解決了跨域，利用script）
項目一：
<body> <h1>項目一</h1> <button class="send_jsonp">jsonp</button> <script> $(".send_jsonp").click(function () { $.ajax({ url:"", success:function (data) { console.log(data) } }) }); function func(arg) { console.log(arg) } </script> <script src="http://127.0.0.1:8080/ajax_send2/"></script> </body>
項目二：
def ajax_send2(request): import json print(222222) # return HttpResponse("func('name')") s = {"name":"dylan","age":18} # return HttpResponse("func('name')") return HttpResponse("func('%s')"%json.dumps(s)) #返回一個func()字符串，正好自己的ajax里面有個func函數，就去執行func函數了，arg就是傳的形參
這回訪問項目一就取到值了：
這其實就是JSONP的簡單實現模式，或者說是JSONP的原型：創建一個回調函數，然后在遠程服務上調用這個函數並且將JSON 數據形式作為參數傳遞，完成回調。
將JSON數據填充進回調函數，這就是JSONP的JSON+Padding的含義。
2. jQuery對JSONP的實現：
項目一：
from flask import Flask from flask import render_template,redirect,request,jsonify app = Flask(__name__) @app.route("/p1",methods=['POST','GET']) def p1(): return render_template('p1.html') if __name__ == '__main__': app.run(host='127.0.0.1',port=80)
p1.html：
<body> <h1>項目一</h1> <button class="send_jsonp">jsonp</button> <script src="/static/jquery.min.js"></script> <script> $(".send_jsonp").click(function () { $.ajax({ url:"http://127.0.0.1:8080/ajax_send2", //去請求項目二中的url dataType:"jsonp", jsonp:'callbacks', success:function (data) { console.log(data) } }) }); </script> {#<script src="http://127.0.0.1:8080/ajax_send2"></script>#} </body>
jsonp: 'callbacks'就是定義一個存放回調函數的鍵，jsonpCallback是前端定義好的回調函數方法名'SayHi'，server端接受callback鍵對應值后就可以在其中填充數據打包返回了;
jsonpCallback參數可以不定義，jquery會自動定義一個隨機名發過去，那前端就得用回調函數來處理對應數據了。利用jQuery可以很方便的實現JSONP來進行跨域訪問。
注意 JSONP一定是GET請求
項目二：p2.py
from flask import Flask from flask import render_template,redirect,request,jsonify app = Flask(__name__) @app.route("/ajax_send2",methods=['POST','GET']) def ajax_send2(): import json print(222222) # return HttpResponse("func('name')") s = {"name":"dylan","age":18} # return HttpResponse("func('name')") callbacks = request.values.get("callbacks") # 注意要在服務端得到回調函數名的名字 print callbacks return "%s('%s')" % (callbacks, json.dumps(s)) if __name__ == '__main__': app.run(host='0.0.0.0',port=8080)
下載代碼： https://files.cnblogs.com/files/dylan-wu/jsonp.rar