python-flask笔记（四)

• 如何获取get请求的参数

from flask import request

• 修改视图函数

@app.route('/')
def hello_world():
    if 'name' in request.args:
        name = request.args['name']
        return render_template('user.html', username=name )
    else:
        return render_template('index.html')

• 现在在浏览器输入http://127.0.0.1:7777/会看到helloworld，如果输入http://127.0.0.1:9999/?name=baozi可以看到hello baozi

再试试post请求

• 在index.html用jQuery发送一个post请求
  • jquery文件目录：static/js/jquery.js
  • static 放在和templates文件同级
  • index.html里引入：

<script src="{{url_for('static', filename='js/jquery.js')}}"></script>

• index.html:

<button type="button">点击获取username</button>


<script src="{{url_for('static', filename='js/jquery.js')}}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('button').click(function() {
            console.log('aaaaaaaaa')
            $.ajax({
                url: 'http://127.0.0.1:7777/register',
                type: 'POST',
                data: {
                    name:'baozi'
                },
                success: function(res) {
                    console.log(res)
                    console.log('successed')
                }
            })
        })
    })
}

• 点击按钮的时候，会向http://127.0.0.1:7777/register发送post请求，并且发送了一个参数 name:'baozi'，接着要在blog.py里面处理这个请求：

@app.route('/register', methods=['POST'])
def register():
    return request.form['name']

• 打开浏览器输入http://127.0.0.1:7777，现在看到的是index.html，里面有个按钮，点击按钮之后F12打开调试台，第一行是 aaaaa表示点击事件触发成功，第二行是 baozi，第三行是successed
• 第二行就是我们服务器返回的数据，我们首先将参数name传到服务器，服务器用request.form['name']获取，（注意post请求是用request.form，get请求是用request.args获取前端传来的数据）然后返回给了前端，作为参数在前端请求成功后的函数里，这样就获取到了后台传来的数据。

现在在index.html文件添加输入框，获取到用户输入的值传给后台，后台再返回某些数据给前端：

• index.html:

##引入css
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='css/index.css')}}">

##删掉其他元素，改成下面的：
<form>
        <label for="username">用户名：</label>
        <input type="text" name="username" id="username" />
        <br />
        <label for="passwor">密码：</label>
        <input type="password" name="password" id="password" />
        <br />
        <button type="button">提交</button>
    </form>

## js:
$(document).ready(function() {
        
        $('button').click(function() {
            ##获取input的值
            let username = $('#username').val()
            console.log(username)
            let password = $('#password').val()
            console.log(password)
            
            $.ajax({
                url: 'http://127.0.0.1:7113/register',
                type: 'POST',
                data: {
                    username: username,
                    password: password
                },
                success: function(res) {
                    console.log(res)
                }
            })
        })
    })

• blog.py

@app.route('/register', methods=['POST'])
def register():
    username = request.form['username']
    password = request.form['password']
    
    return '我知道你的密码是 %s 啦 ' % password

• 现在访问http://127.0.0.1:7113/ 会有两个输入框，在里面输入用户名和密码，然后点击按钮，打开调试台，可以看到打印出了 我知道你的密码是 *** 拉 *号内容为你刚刚输入的密码

• 至此，前后台就算是初步完成交互了，下一步就是后台连接数据库

• 全部代码：

• index.html

 <form>
        <div class="form-control">
            <label for="username">用户名：</label>
            <input type="text" name="username" id="username" />
        </div>
        <div class="form-control">
            <label for="passwor">密码：</label>
            <input type="password" name="password" id="password" />
        </div>
        <button type="button">提交</button>
    </form>


    <script src="{{url_for('static', filename='js/jquery.js')}}"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        console.log('aaaaaaa')
        
        $('button').click(function() {

            let username = $('#username').val()
            console.log(username)
            let password = $('#password').val()
            console.log(password)
            
            $.ajax({
                url: 'http://127.0.0.1:7113/register',
                type: 'POST',
                data: {
                    username: username,
                    password: password
                },
                success: function(res) {
                    console.log(res)
                }
            })
        })
    })

    </script>

• blog.py

from flask import Flask
from flask import render_template
from flask_script import Manager
from flask import url_for
from flask import request

app = Flask(__name__)
manager = Manager(app)


@app.route('/')
def hello_world():
    if 'name' in request.args:
        name = request.args['name']
        return render_template('user.html', username=name)
    else:
        return render_template('index.html')


@app.route('/register', methods=['POST'])
def register():
##这里是python打印方法，但是不知道是从哪里输出来，运行服务器后看不到这些输出信息，以后再解决，这里输出的是一些请求的信息
    # print (request.headers)
    # print (request.form)
    # print (request.form['name'])
    # print (request.form.get('name'))

    username = request.form['username']
    password = request.form['password']
    
    return '我知道你的密码是 %s 啦 ' % password



@app.route('/<username>')
def user(username):
    return render_template('user.html', username=username)

@app.errorhandler(404)
def page_not_found(e):
    return render_template('404.html'), 404

@app.errorhandler(500)
def internal_server_error():
    return render_template('500.html'), 500



if __name__ == '__main__':
    app.run(port=7113, debug=True)

``