2.前端提交表單數(shù)據(jù)该窗,后端不返回新頁面它浅,只是部分刷新頁面內(nèi)容荠察。
這里就需要用到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屬性悉盆,這里會執(zhí)行submitForm()函數(shù)盯荤。
js代碼:
function submitForm(){
$('#SQ').ajaxSubmit(function (message) {
console.log(message);
document.getElementById(shenqingliyou.innerHTML="");
alert("提交成功!");
});
return false
}
點擊按鈕之后焕盟,我這里是讓id為shenqingliyou的那個輸入框填充為空秋秤,也就是說在申請理由文本框中輸入,點擊提交之后,文本框清空灼卢,而數(shù)據(jù)傳到了后端绍哎。
后端代碼:
@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')
函數(shù)開始5行是獲得表單里的數(shù)據(jù),和之前的全局變量鞋真。之后是導入數(shù)據(jù)庫的內(nèi)容了崇堰。
最后雖然寫了return render_template('index.html'),但實際上不會返回這個頁面涩咖,只是實現(xiàn)局部刷新海诲,就是js里面寫的把文本框清空,但是上面的申請類型和申請時間還保持不變抠藕。