【Python】【Flask】前端呼叫後端方法

阿新 • • 發佈：2018-12-24

後端程式碼：

@app.route("/test",methods=['POST','GET'])
def test():
    return "我是測試的"

前端程式碼：

1、使用<a>標籤

<a href="{{url_for('test')}}">我是測試</a>

這個是最簡單的，點選一下，就自動跳轉了。

2、使用<button>的onclick

說起這個，光這個click就折騰了我一整天了。網上找不到啊。初學網頁+Python+Flask，所以根本不懂啊，又找不到。最後終於解決。

<button onclick="window.location.href='{{ url_for("test") }}'">點我啊</button>

之前為什麼一直失敗呢，因為 <a>標籤是直接{{url_for('test')}}就可以了，所以我當時就想啊，onclick肯定也一樣啊，直接

<button onclick="{{ url_for("test") }}">點我啊</button>#這是錯誤的哦

導致一直失敗，百度也找不到，可能是因為太簡單了吧。反正記錄下，說不定也有其他小白和我一樣呢，哈哈哈。

<script>
    function testclick(name)
    {
        //window.location.href="{{ url_for("test") }}";
        window.open("{{ url_for("test") }}","_self");
    }
</script>
<button onclick="testclick('淘寶:夢琪動漫屋')">點選我啊</button>

這樣寫法也一樣的。

3、前端ajax傳送資料，後臺接收資料(4種顏色，4種寫法)

Html：

$.ajax({
                url:'/test',
                type:'POST',

                data:JSON.stringify({'username':'js','psw':'123456789'}),
                #或者data: {jsdata: JSON.stringify({'username': 'js','psw': '132456789'})},

                #或者data:{'username':'js','psw':'123456789'},
                #或者data:"username=js&psw=123",

                dataType: 'json',
                success:function(res){
                    console.log(res)
                    console.log(0)

                },
                error:function (res) {
                    console.log(res);
                    console.log(1)
                }
            })

引數介紹：

1.url:
要求為String型別的引數，（預設為當前頁地址）傳送請求的地址。

2.type:
要求為String型別的引數，請求方式（post或get）預設為get。注意其他http請求方法，例如put和delete也可以使用，但僅部分瀏覽器支援。

3.timeout:
要求為Number型別的引數，設定請求超時時間（毫秒）。此設定將覆蓋$.ajaxSetup()方法的全域性設定。

4.async:
要求為Boolean型別的引數，預設設定為true，所有請求均為非同步請求。如果需要傳送同步請求，請將此選項設定為false。注意，同步請求將鎖住瀏覽器，使用者其他操作必須等待請求完成才可以執行。

5.cache:
要求為Boolean型別的引數，預設為true（當dataType為script時，預設為false），設定為false將不會從瀏覽器快取中載入請求資訊。

6.data:
要求為Object或String型別的引數，傳送到伺服器的資料。如果已經不是字串，將自動轉換為字串格式。get請求中將附加在url後。防止這種自動轉換，可以檢視　　processData選項。物件必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是陣列，JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。

7.dataType:
要求為String型別的引數，預期伺服器返回的資料型別。如果不指定，JQuery將自動根據http包mime資訊返回responseXML或responseText，並作為回撥函式引數傳遞。可用的型別如下：
xml：返回XML文件，可用JQuery處理。
html：返回純文字HTML資訊；包含的script標籤會在插入DOM時執行。
script：返回純文字JavaScript程式碼。不會自動快取結果。除非設定了cache引數。注意在遠端請求時（不在同一個域下），所有post請求都將轉為get請求。
json：返回JSON資料。
jsonp：JSONP格式。使用SONP形式呼叫函式時，例如myurl?callback=?，JQuery將自動替換後一個“?”為正確的函式名，以執行回撥函式。
text：返回純文字字串。

8.beforeSend：
要求為Function型別的引數，傳送請求前可以修改XMLHttpRequest物件的函式，例如新增自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest物件是惟一的引數。
            function(XMLHttpRequest){
               this;   //呼叫本次ajax請求時傳遞的options引數
            }
9.complete：
要求為Function型別的引數，請求完成後呼叫的回撥函式（請求成功或失敗時均呼叫）。引數：XMLHttpRequest物件和一個描述成功請求型別的字串。
          function(XMLHttpRequest, textStatus){
             this;    //呼叫本次ajax請求時傳遞的options引數
          }

10.success：要求為Function型別的引數，請求成功後呼叫的回撥函式，有兩個引數。
         (1)由伺服器返回，並根據dataType引數進行處理後的資料。
         (2)描述狀態的字串。
         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this; //呼叫本次ajax請求時傳遞的options引數
         }

11.error:
要求為Function型別的引數，請求失敗時被呼叫的函式。該函式有3個引數，即XMLHttpRequest物件、錯誤資訊、捕獲的錯誤物件(可選)。ajax事件函式如下：
       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情況下textStatus和errorThrown只有其中一個包含資訊
          this;   //呼叫本次ajax請求時傳遞的options引數
       }

12.contentType：
要求為String型別的引數，當傳送資訊至伺服器時，內容編碼型別預設為"application/x-www-form-urlencoded"。該預設值適合大多數應用場合。

13.dataFilter：
要求為Function型別的引數，給Ajax返回的原始資料進行預處理的函式。提供data和type兩個引數。data是Ajax返回的原始資料，type是呼叫jQuery.ajax時提供的dataType引數。函式返回的值將由jQuery進一步處理。
            function(data, type){
                //返回處理後的資料
                return data;
            }

14.dataFilter：
要求為Function型別的引數，給Ajax返回的原始資料進行預處理的函式。提供data和type兩個引數。data是Ajax返回的原始資料，type是呼叫jQuery.ajax時提供的dataType引數。函式返回的值將由jQuery進一步處理。
            function(data, type){
                //返回處理後的資料
                return data;
            }

15.global：
要求為Boolean型別的引數，預設為true。表示是否觸發全域性ajax事件。設定為false將不會觸發全域性ajax事件，ajaxStart或ajaxStop可用於控制各種ajax事件。

16.ifModified：
要求為Boolean型別的引數，預設為false。僅在伺服器資料改變時獲取新資料。伺服器資料改變判斷的依據是Last-Modified頭資訊。預設值是false，即忽略頭資訊。

17.jsonp：
要求為String型別的引數，在一個jsonp請求中重寫回調函式的名字。該值用來替代在"callback=?"這種GET或POST請求中URL引數裡的"callback"部分，例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給伺服器。

18.username：
要求為String型別的引數，用於響應HTTP訪問認證請求的使用者名稱。

19.password：
要求為String型別的引數，用於響應HTTP訪問認證請求的密碼。

20.processData：
要求為Boolean型別的引數，預設為true。預設情況下，傳送的資料將被轉換為物件（從技術角度來講並非字串）以配合預設內容型別"application/x-www-form-urlencoded"。如果要傳送DOM樹資訊或者其他不希望轉換的資訊，請設定為false。

21.scriptCharset：
要求為String型別的引數，只有當請求時dataType為"jsonp"或者"script"，並且type是GET時才會用於強制修改字符集(charset)。通常在本地和遠端的內容編碼不同時使用。

Python Flask：

#PS. 空格可能沒有對齊
@app.route('/test', methods=['POST'])
def test():

    data = request.get_json(force=True)#獲取json資料
    username =data['username']
    password =data['psw']

    #或者data = json.loads(request.form.get('jsdata'))  
    #或者username =data["username"] 
    #或者password =data["psw"]
    #或者password = request.form.get('psw')
    #或者username = request.form.get('username')
    #或者password = request.form.get('psw')
    #或者username = request.form.get('username')

    print(username) 
    print(password) 
    return username

request

request 對於 Web 應用，與客戶端傳送給伺服器的資料互動至關重要。在 Flask 中由全域性的 request 物件來提供這些資訊。

form
一個從POST和PUT請求解析的 MultiDict（一鍵多值字典）。
args
MultiDict，要操作 URL （如 ?key=value ）中提交的引數可以使用 args 屬性:

searchword = request.args.get('key', '')

values
CombinedMultiDict，內容是form和args。
可以使用values替代form和args。
cookies
顧名思義，請求的cookies，型別是dict。
stream
在可知的mimetype下，如果進來的表單資料無法解碼，會沒有任何改動的儲存到這個·stream·以供使用。很多時候，當請求的資料轉換為string時，使用data是最好的方式。這個stream只返回資料一次。
headers
請求頭，字典型別。
data
包含了請求的資料，並轉換為字串，除非是一個Flask無法處理的mimetype。
files
MultiDict，帶有通過POST或PUT請求上傳的檔案。
environ
WSGI隱含的環境配置。
method
請求方法，比如POST、GET。
path
script_root
url
base_url
url_root
如果使用者請求如下URL：
http://www.example.com/myapplication/page.html?x=y
以上的引數內容如下：

名稱	內容
path	/page.html
script_root	/myapplication
base_url	http://www.example.com/myapplication/page.html
url	http://www.example.com/myapplication/page.html?x=y
url_root	http://www.example.com/myapplication/

is_xhr
如果請求是一個來自JavaScript XMLHttpRequest的觸發，則返回True，這個只工作在支援X-Requested-With頭的庫並且設定了XMLHttpRequest。
blurprint
藍本名字。
endpoint
endpoint匹配請求，這個與view_args相結合，可是用於重構相同或修改URL。當匹配的時候發生異常，會返回None。
get_json(force=False, silent=False, cache=True)
json
如果mimetype是application/json，這個引數將會解析JSON資料，如果不是則返回None。
可以使用這個替代get_json()方法。
max_content_length
只讀，返回MAX_CONTENT_LENGTH的配置鍵。
module
如果請求是傳送到一個實際的模組，則該引數返回當前模組的名稱。這是棄用的功能，使用blueprints替代。
on_json_loading_failed(e)
routing_exception = None
如果匹配URL失敗，這個異常將會/已經丟擲作為請求處理的一部分。這通常用於NotFound異常或類似的情況。
url_rule = None
內部規則匹配請求的URL。這可用於在URL之前/之後檢查方法是否允許(request.url_rule.methods) 等等。
預設情況下，在處理請求函式中寫下
```
print('request.url_rule.methods', request.url_rule.methods) 
```
會列印：
```
request.url_rule.methods {‘GET’, ‘OPTIONS’, ‘HEAD’}
```
view_args = None
一個匹配請求的view引數的字典，當匹配的時候發生異常，會返回None。

PS. JS 頁面被快取，導致JS程式碼修改後，頁面重新整理顯示依然是舊資料的問題

　　網上都說加?t=20171206

　　所以呢，我就在ajax請求的url上加了，結果資料依然是舊的，百思不得其解.....

$.ajax({
    type:"GET",
    url:"/employee"+"?t="+new Date().getTime(),
　　.....
})
最後呢，發現原來是在引用JS的src上修改即可<script type="text/javascript" src="../js/emp.js?t=20171206">


PS.引數傳遞方法記錄(補充2018-04-24)
1、

#需要新增 from flask import request

@app.route('/login',methods=["GET","POST"])
def login():
    if request.method == "POST":
        # 以POST方式傳引數，通過form取值
        # 如果Key之不存在，報錯KeyError，返回400的頁面
        username = request.form['username']
        password = request.form['password']
        print username,password
    else:
        # 以GET方式傳引數，通過args取值
        username = request.args['username']
        print username
    return render_template('login.html', req_method=request.method)

#網頁呼叫http://127.0.0.1:8080/login/?username=ceshi&password=123456

2、

@app.route('/data/<type>/<startindex>/<count>',methods=['GET'])
def GetDataFromType(type,startindex,count):
    return type+startindex+count


#網頁呼叫http://127.0.0.1:8080/data/ceshi/0/14

【Python】【Flask】前端呼叫後端方法

request

【Python】【Flask】前端呼叫後端方法

【備忘】python從零基礎到前端到後端的開發視訊教程下載

前端呼叫後端的寫法

小程式前端呼叫後端介面

ASP.NET DEV 前端利用後端方法顯示PDF檔案連結地址,點選下載

【Python】【Flask】前端調用後端方法

【Python模塊學習】sys模塊

【Python常見問題總結】

【python常見面試題】之python 中對list去重的多種方法

【Python數據分析】

01月05日三周四次【Python基礎進階】

01月11日四周四次【Python基礎進階】

【Selenium】【Python多線程】

01月12日四周五次【Python基礎進階】

【python 字符串】字符串的相關方法(二)

【python 字符串】字符串的相關方法(三)

【Python pip 基礎命令】

【Python學習之七】面向對象高級編程——使用@property

【Python學習之十】yield之send方法

【python標準庫學習】thread，threading(一)多線程的介紹和使用

【Python】【Flask】前端呼叫後端方法

request

相關推薦