Flask框架学习之前后端交互（二）

2.前端提交表单数据，后端不返回新页面，只是部分刷新页面内容。

这里就需要用到ajax的知识了。
html代码：

<form id="SQ" method="post" action="/message" onsubmit="return submitForm()">
                            <b>申请类型：</b>
                            <input type="radio" checked=""  name="leixing" value="buqian">补签
                            <input type="radio" name="leixing" value="qingjia">请假
                            <input type="radio" name="leixing" value="chuchai">出差
                            <br>

                            <b>申请时间：</b>
                            <input type="date" style="background: #3c3c3c" name="shenqingshijian">

                            <b>申请理由：</b>
                            <textarea  id="shenqingliyou" class="three-select" rows="10" cols="50" name="shenqingliyou"></textarea>

                            <p align="center">
                                <input id="bttijiao" class="btn btn--lg btn--blue" type="submit" value="提交">
                            </p>

</form>

貌似和之前没啥差别，只是form标签里多了个onsubmit属性，这里会执行submitForm()函数。

js代码:

function submitForm(){
    $('#SQ').ajaxSubmit(function (message) {
        console.log(message);
        document.getElementById(shenqingliyou.innerHTML="");
        alert("提交成功！");
    });
    return false
}

点击按钮之后，我这里是让id为shenqingliyou的那个输入框填充为空，也就是说在申请理由文本框中输入，点击提交之后，文本框清空，而数据传到了后端。

后端代码：

@app.route('/message', methods=['post', 'GET'])
def shenqing():
    shenqing_leixing = request.form['leixing']
    shenqing_shijian = request.form['shenqingshijian']
    shenqing_liyou = request.form['shenqingliyou']
    shenqing_name = session.get('name_name')
    shenqing_nameid = session.get('name_id')

    if shenqing_leixing == 'buqian':
        leixing = 'retroactive'
    elif shenqing_leixing == 'qingjia':
        leixing = 'dayoff'
    elif shenqing_leixing == 'chuchai':
        leixing = 'business_trip'
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', password='123', db='ci', charset='utf8')
    cur = conn.cursor()
    sql = "INSERT INTO `"+str(leixing)+"`(`name`, `name_id`, `date`, `reason`, `result`) VALUES ('"+str(shenqing_name)+"','"+str(shenqing_nameid)+"','"+str(shenqing_shijian)+"','"+str(shenqing_liyou)+"','未处理');"
    cur.execute(sql)
    personmessage = cur.fetchall()
    conn.close()

    return render_template('index.html')

函数开始5行是获得表单里的数据，和之前的全局变量。之后是导入数据库的内容了。
最后虽然写了return render_template('index.html')，但实际上不会返回这个页面，只是实现局部刷新，就是js里面写的把文本框清空，但是上面的申请类型和申请时间还保持不变。