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": ""

        };

        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": ""

        };

        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对象

from flask import Flask

from flask import url_for

from flask import redirect

app = Flask(__name__)

@app.route('/')

def index():

    # return '重定向测试页面'

    path = url_for('test01')

    print('路径为：', path)

    resp = redirect(path)

    print('重定向方法返回值的类型为: ', type(resp))

    return resp

@app.route('/test/', endpoint='test01')

def test():

    return '测试页面'

print(app.url_map)

if __name__ == '__main__':

    app.run(debug=True)

3 后台响应数据

　　3.1 后台如何向前台响应数据

　　　　利用视图函数的返回值来设定，可以返回字符串，也可以返回元组，还可以返回一个Response对象

　　3.1 利用jsonify返回json格式的数据

　　　　注意：jsonify方法返回的实际上就是一个Response对象

from flask import Flask

from flask import request

from flask import jsonify

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

@app.route('/')

def index():

    return 'work05的测试页面'

@app.route('/test/', methods=['GET', 'POST'])

def test():

    if(request.is_xhr):

        print('前台发送的是ajax请求哟.')

        resp = jsonify({

            "username": "王杨帅",

            "address": "重庆市"

        })

    #     jsonify方法返回的是一个response对象

    else:

        print('前台发送的是普通的请求')

        resp = "这是后台响应的数据哟"

    return resp

print(app.url_map)

if __name__ == '__main__':

    app.run(debug=True)

　　注意：ajax请求接收后台的返回数据方式　　

<!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": ""

        };

        url = "/test/";

        $.post(url, data).done(function (data) {

            alert(data.address);

            alert(data.username);

        });

    </script>

</body>

</html>