怎么实现从接口获取的信息的表格局部自动刷新
问题描述
html如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>title</title><!-- <meta http-equiv="refresh" content="2"> --><script language="javascript" src="../JS/login.js"></script><link rel="stylesheet" href="../CSS/login.css" type="text/css"></head><body onload="Login();"> <div class="main"> <div id="myDiv" class="table1box"> <table id="table1" class="table1" border="1px"> <tr> <th>信息</th> <th>msg</th> <th>认证码</th> </tr> </div> </div> </table> </body></html>
js如下：
function Login() { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var datastr = xmlhttp.responseText; var dataobj = JSON.parse(datastr) let dataarr = []; for (let i in dataobj) { dataarr.push(dataobj[i]); }
var table = document.getElementById("table1"); var row = table.insertRow(table.rows.length); var c1 = row.insertCell(0); c1.innerHTML = dataarr[0]; var c2 = row.insertCell(1); c2.innerHTML = dataarr[1]; var c3 = row.insertCell(2); c3.innerHTML = dataarr[2]; } } xmlhttp.open("POST", "https://api.123321yun.com/api/user/login?username=test123&password=123456", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send(); }
小白求帮忙
问题解答
回答1：1。确定要刷新 的元素 比如 id为 #cont
2。ajax不停的请求服务器（后端的逻辑自己写，什么条件下需要更新内容）
3。当请求到新的内容 就将元素#cont内容进行修改
就这么思路
相关文章：
1. 网页爬虫 - 关于Python的编码与解码问题2. css - 文字排版问题，内容都是动态抓出来的，字数不一定。如何对齐啊3. css3 - 微信前端页面遇到的transition过渡动画的bug4. selenium-selenium-webdriver - python 将当前目录加入到 环境变量5. javascript - html5 input file 如何限制只能调起图库和摄像头、不能选择其他类型的文件？6. css3 - 微信小程序如何把radio改成2个选择按钮的样式7. javascript - 为什么var obj = {}创建对象的方法里面不能用this.xxx来声明属性 ?8. redis - 究竟是选择微信小程序自带的统计工具还是自己开发一个数据统计的代码?9. javascript - postcss-loader在webpack2的使用.10. php ZipArchive关于不同目录文件压缩
网公网安备