最近在写软件工程的大作业,之前都没写过前端,所以写得挺痛苦的,在这里记录一下自己遇到的问题。
==============================================
动态刷新页面表格的方法,在这里记录如下:
#views.py
@csrf_exempt
def checkinfo(request):
if request.method == 'GET':
return render(request, "adm/checkInfo.html")
elif request.method == 'POST':
all_data = machine.check_info()#所有信息
ret = {
'code': 200,
'msg': 'ok1',
'all_data': all_data
}
logger.info('info is: ' + str(ret))
all_data = 0
return JsonResponse(ret)
//javascript
//执行插入
function checkinfo() {
$.ajax({
type: 'POST',
url: 'checkInfo',
data: {
"get": ""
},
datatype: 'json',
success: function (data) {
var artTable = document.getElementById("tb");//与表格的id对应
var artBody=artTable.tBodies[0];
artBody.parentNode.outerHTML = artBody.parentNode.outerHTML.replace(artBody.innerHTML, "");//每次递归先把上次递归的表格清除
var all_li = eval(data);
var all_list = eval(all_li.all_data);
var tb = document.getElementById('tb');//与表格的id对应
var body = tb.querySelector('tbody');//找到对应表格的标签
for (let i = 0; i < all_list.length; i++) {
//设置表格每个单元的值
var fie = all_list[i].fields;
var tr = document.createElement('tr');
var td1 = document.createElement('th', scope = "col");
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var td4 = document.createElement('td');
var td5 = document.createElement('td');
var td6 = document.createElement('td');
var td7 = document.createElement('td');
var td8 = document.createElement('td');
td1.innerHTML = all_list[i].pk;
td2.innerHTML = fie.is_on;
td3.innerHTML = fie.goal_temp;
td4.innerHTML = fie.curr_temp;
td5.innerHTML = fie.sp_mode;
td6.innerHTML = fie.work_mode;
td7.innerHTML = fie.total_cost;
//设置完成后,将每一项插入到表格中
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tr.append(td5);
tr.append(td6);
tr.append(td7);
body.append(tr);
}
}
})
}
//javascript
//递归,每五秒更新一次
function loop_check()
{
//递归,每5s更新一次信息
checkinfo();
a = window.setTimeout("loop_check()", 5000);
//window.clearTimeout(a);
}
loop_check();
你可能感兴趣的:(ajax,html,python,js,django)