インターフェースから取得したテーブル情報の部分自動リフレッシュの実装方法
胡行东
胡行东 2019-03-29 11:02:54
0
2
1129

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">



<テーブル 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 のコンテンツが変更されます

それがアイデアです

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート