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里面写的把文本框清空,但是上面的申请类型和申请时间还保持不变。