怎么實現從接口獲取的信息的表格局部自動刷新
問題描述
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. javascript - js中遞歸與for循環同時發生的時候，代碼的執行順序是怎樣的？2. 小程序怎么加外鏈，語句怎么寫！求救新手，開文檔沒發現3. python - linux怎么在每天的凌晨2點執行一次這個log.py文件4. php如何獲取訪問者路由器的mac地址5. android - 鍵盤遮擋RecyclerView6. 如何分別在Windows下用Winform項模板+C#，在MacOSX下用Cocos Application項目模板+Objective-C實現一個制作游戲的空的黑窗口？7. javascript - jQuery each 方法第三個參數args 如何解釋？8. javascript - 在 vue里面用import引入js文件，結果為undefined9. java - new + 類名，一定需要申明一個對象嗎？10. javascript - ...mapGetters和...mapState獲取到的state，怎么拿來在methods中操作？
網公網安備