4.前端点击按钮,从后端(数据库)提取信息显示到前端页面。
这里也需要用到ajax的知识,也是实现的局部刷新,不跳到新页面。
举例:前端点击按钮,从数据库中得到数据,返回到前端的一个<table>标签中。
html代码:
<table id="xxtable">
</table>
<button id="xiaoxirefresh" onclick="xxrefresh()">刷新</button>
很简单,就一个table标签,里面啥都没有,要好看的可以加一个thead。点击刷新之后,便出来了。
js代码:
function xxrefresh() {
var tbody= document.getElementById("xxtable");
$.ajax({
url:'/xiaoxi',
type:'GET',
dataType: 'json',
success:function(u2){
if(u2){
var str = "";
for (i in u2){
str += "<tr>" +
"<td>"+u2[i][0]+"</td>"+
"<td>"+u2[i][1]+"</td>"+
"<td>"+u2[i][2]+"</td>"+
"<td>"+u2[i][3]+"</td>"+
"</tr>";
}
tbody.innerHTML=str;
}
},
error:function(){
alert("错误!!");
}
});
}
这里是接收到后端传来的u2数据。
再看后端代码:
@app.route('/xiaoxi', methods=['post', 'get'])
def xiaoxi():
xiaoxi_nameid = session.get('name_id')
conn2 = pymysql.connect(host='127.0.0.1', user='root', password='123', db='ci', charset='utf8')
cur2 = conn2.cursor()
sqlll = "SELECT `date`, `reason`, `result` FROM `retroactive` WHERE name_id =" + xiaoxi_nameid
cur2.execute(sqlll)
u21 = cur2.fetchall()
u2 = []
for i in range(len(u21)):
list1 = list(u21[i])
list1.insert(3, '补签')
u2.insert(i, list1)
conn2.close()
conn3 = pymysql.connect(host='127.0.0.1', user='root', password='123', db='ci', charset='utf8')
cur3 = conn3.cursor()
sqlll = "SELECT `date`, `reason`, `result` FROM `dayoff` WHERE name_id =" + xiaoxi_nameid
cur3.execute(sqlll)
u31 = cur3.fetchall()
u3 = []
for i in range(len(u31)):
list2 = list(u31[i])
list2.insert(3, '请假')
u3.insert(i, list2)
conn3.close()
conn4 = pymysql.connect(host='127.0.0.1', user='root', password='123', db='ci', charset='utf8')
cur4 = conn4.cursor()
sqlll = "SELECT `date`, `reason`, `result` FROM `business_trip` WHERE name_id =" + xiaoxi_nameid
cur4.execute(sqlll)
u41 = cur4.fetchall()
u4 = []
for i in range(len(u41)):
list3 = list(u41[i])
list3.insert(3, '出差')
u4.insert(i, list3)
conn4.close()
u2 = u2 + u3 + u4
for i in range(len(u2)):
u2[i][0] = str(u2[i][0])
return json.dumps(u2)
这里分别是从数据库中三个表里面取数据,然后合并,方法比较蠢,忽略。。。。
最后把u2变成二维列表的形式,传给前端。
我这里u2 = u2 + u3 + u4这就已经是二维列表了,下面的for循环把每个列表的第一项数据类型原来是data类型,转换为字符串类型的。