怎么實(shí)現(xiàn)從接口獲取的信息的表格局部自動刷新
問題描述
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>認(rèn)證碼</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不停的請求服務(wù)器(后端的邏輯自己寫,什么條件下需要更新內(nèi)容)
3。當(dāng)請求到新的內(nèi)容 就將元素#cont內(nèi)容進(jìn)行修改
就這么思路
相關(guān)文章:
1. java - ehcache緩存用的是虛擬機(jī)內(nèi)存么?2. javascript - JS如何取對稱范圍的隨機(jī)數(shù)?3. 數(shù)據(jù)庫 - mysql如何處理數(shù)據(jù)變化中的事務(wù)?4. 關(guān)于docker下的nginx壓力測試5. javascript - 有什么兼容性比較好的辦法來判斷瀏覽器窗口的類型?6. java - mongodb分片集群下,count和聚合統(tǒng)計(jì)問題7. android - java 泛型不支持?jǐn)?shù)組,那么RxJava的Map集合有什么方便的手段可以定義獲得一串共同父類集合數(shù)據(jù)呢?8. 服務(wù)器端 - 采用nginx做web服務(wù)器,C++開發(fā)應(yīng)用程序 出現(xiàn)拒絕連接請求?9. java - 自己制作一個(gè)視頻播放器,遇到問題,用的是內(nèi)置surfaceview類,具體看代碼!10. dockerfile - 我用docker build的時(shí)候出現(xiàn)下邊問題 麻煩幫我看一下
