1. 程式人生 > >Flask04 後臺獲取請求資料、檢視函式返回型別、前臺接受響應資料

Flask04 後臺獲取請求資料、檢視函式返回型別、前臺接受響應資料

1 後臺獲取請求資料

  1.1 提出問題

    前臺傳送請求的方式有哪些

    後臺如何獲取這些請求的引數

  1.2 前臺傳送請求的方式

    GET、POST、AJAX

    點睛:如果不指定請求方式,瀏覽器預設使用GET請求

    點睛:進入登入頁面的請求和提交登入資訊的請求使用的路徑都是一樣的,只不過前往登入頁面的請求是GET請求,伺服器返回的是一個靜態的頁面;當錄入登入資訊點選確定後就會向後臺傳送一個POST請求,後臺經過邏輯處理後,如果登入資訊正確就會返回一個靜態主頁面(注意:雖然這兩個請求都是使用的一樣的路徑,但是我們的後臺會根據不同的請求方式執行不同的邏輯);

    1.2.1 GET請求例項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單請求</title>
</head>
<body>
    <div>
        <form action="/test/form/" method="get">
            <div>
                <label for="username">使用者</label>
                <input type="
text" name="username" id="username" /> </div> <div> <label for="password">密碼</label> <input type="password" name="password" id="password" /> </div> <div> <input type="
submit" value="提交" /> </div> </form> </div> </body> </html>

    1.2.2 POST請求例項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單請求</title>
</head>
<body>
    <div>
        <form action="/test/form/" method="POST">
            <div>
                <label for="username">使用者</label>
                <input type="text" name="username" id="username" />
            </div>
            <div>
                <label for="password">密碼</label>
                <input type="password" name="password" id="password" />
            </div>
            <div>
                <input type="submit" value="提交" />
            </div>
        </form>
    </div>
</body>
</html>

    1.2.3 AJAX請求例項

      GET形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax請求</title>
    <script src="jquery-3.2.1.js"></script>
</head>
<body>
    ajax請求測試頁面
    <script>
        data = {
            "username": "warrior",
            "password": "123321"
        };
        url = "/test/ajax/";
        $.get(url, data);
    </script>
</body>
</html>

      POST形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax請求</title>
    <script src="jquery-3.2.1.js"></script>
</head>
<body>
    ajax請求測試頁面
    <script>
        data = {
            "username": "warrior",
            "password": "123321"
        };
        url = "/test/ajax/";
        $.post(url, data);
    </script>
</body>
</html>

  1.3 後臺接收請求的方式

    後臺利用request物件的相關方法獲取前臺傳送過來的請求引數

      request.args  獲取GET請求引數
      request.form  獲取POST請求引數

    1.3.1 獲取GET/POST請求引數例項

      

    1.3.2 獲取AJAX請求引數例項

      

from flask import Flask
from flask import request

app = Flask(__name__, static_folder='./workStatic')

request.args
request.form

@app.route('/')
def index():
    return '練習程式碼的主頁'

@app.route('/test/form/', methods=['GET', 'POST'], endpoint='test01')
def test():
    getData = request.args # 利用request物件獲取GET請求資料
    print('獲取的GET資料為:', getData) # 列印獲取到的GET資料
    postData = request.form # 利用request物件獲取POST請求資料
    print('獲取的POST資料為:', postData) # 列印獲取到的POST請求
    return '這是測試頁面'

@app.route('/test/ajax/', methods=['GET','POST'], endpoint='test02')
def test():
    postData = request.form; # 獲取ajax的請求引數(請求方式時post)
    print('post形式的ajax請求引數:', postData) # 列印獲取到的引數
    # print(request.form.get('username')) # 獲取指定的引數

    getData = request.args; # 獲取ajax的請求引數(請求方式時get)
    print('get形式的ajax請求引數:', getData)
    print(request.args.get('password'))
    return '這是測試ajax請求頁面'

print(app.url_map)

if __name__ == '__main__':
    app.run(debug=True)
後臺原始碼

  1.4 小應用

    後臺根據不同的請求方式使用不同的方法獲取請求單數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單請求</title>
</head>
<body>
    <div>
        <form action="/test/" method="POST">
            <div>
                <label for="username">使用者</label>
                <input type="text" name="username" id="username" />
            </div>
            <div>
                <label for="password">密碼</label>
                <input type="password" name="password" id="password" />
            </div>
            <div>
                <input type="submit" value="提交" />
            </div>
        </form>
    </div>
</body>
</html>
form表單頁面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax請求</title>
    <script src="jquery-3.2.1.js"></script>
</head>
<body>
    ajax請求測試頁面
    <script>
        data = {
            "username": "warrior",
            "password": "123321"
        };
        url = "/test/";
        $.post(url, data);
    </script>
</body>
</html>
ajax請求頁面
from flask import Flask
from flask import request

app = Flask(__name__, static_folder='./workStatic')

@app.route('/')
def index():
    return "小應用主頁面"

@app.route('/test/', methods=['GET', 'POST'], endpoint='test01')
def test():
    print('請求頭: ', request.headers) # 列印輸出頭部資訊
    print('請求方法:', request.method) # 列印輸出請求方法
    
    if(request.is_xhr):
        print('AJAX請求引數為:', request.form)
    elif(request.method == 'GET'):
        print('GET形式的表單請求引數為:', request.args)
    else:
        print('POST形式的表單請求引數為:', request.form)
    return '分方式獲取請求引數'

print(app.url_map)

if __name__ == '__main__':
    app.run(debug=True)
後臺處理頁面

2 後臺檢視函式的返回值型別

  2.1 提出問題

    後臺的檢視函式的返回值只能是字串形式嗎

  2.2 後臺檢視函式的返回值種類

    字串

    元組

    response物件

  2.3 返回字串的例項

    這個太簡單,三少在這裡就不廢話啦

  2.4 返回元組型別

    格式:

      return (需要返回的資料, 狀態碼, 響應資訊)

      注意:需要返回的資料必須是字串,如果是json格式的資料就用引號括起來,從而變成字串

    例如:

      return ('hello', 200, {})      

    

    

  2.5 返回response物件

    

    2.5.1 返回response物件的應用

      重定向返回的就是response物件