<button onclick="loadOutput()">加载NTP服务器状态</button> <pre id = "ntpq"></pre> <script> function loadOutput(){ var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function(){ if(this.readyState == 4 && this.status == 200){ var ntpqTable = document.getElementById("ntpq"); ntpq.innerHTML = this.responseText; } }; xhttp.open("GET","ntp.php",true); xhttp.send(); } 添加功能 点击按钮后 隔一秒获取php的返回值
时间: 2024-02-10 14:09:15 浏览: 67
好的,我可以帮您添加这个功能。您可以尝试以下代码:
```html
<button onclick="loadOutput()">加载NTP服务器状态</button>
<pre id="ntpq"></pre>
<script>
function loadOutput() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var ntpqTable = document.getElementById("ntpq");
ntpqTable.innerHTML = this.responseText;
}
};
xhttp.open("GET", "ntp.php", true);
xhttp.send();
}
setInterval(loadOutput, 1000); //每隔1秒调用一次loadOutput函数
</script>
```
这样,您点击按钮后,每隔1秒就会自动获取一次php的返回值并更新到页面上。
相关问题
<button onclick="loadOutput()">加载NTP服务器状态</button> <pre id="ntpq"></pre> <script> function loadOutput() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var ntpqTable = document.getElementById("ntpq"); ntpqTable.innerHTML = this.responseText; } }; xhttp.open("GET", "ntp.php", true); xhttp.send(); } setInterval(loadOutput, 1000); </script> 修改代码 只有在点击按钮时才显示php的返回值
<button onclick="loadOutput()">加载NTP服务器状态</button>
<pre id="ntpq"></pre>
<script>
function loadOutput() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var ntpqTable = document.getElementById("ntpq");
ntpqTable.innerHTML = this.responseText;
}
};
xhttp.open("GET", "ntp.php", true);
xhttp.send();
}
var intervalId;
function startInterval() {
intervalId = setInterval(loadOutput, 1000);
}
function stopInterval() {
clearInterval(intervalId);
}
</script>
这段代码添加了两个新的函数 `startInterval` 和 `stopInterval`,用于控制定时器的启停。在 HTML 中,按钮的点击事件改为调用 `startInterval` 函数,即只有在点击按钮时才启动定时器。同时,将定时器的 ID 存储在全局变量 `intervalId` 中,方便后续的停止操作。需要停止定时器时,调用 `stopInterval` 函数即可。
<button id="ntpqBtn">加载NTP服务器状态</button> <pre id = "ntpq"></pre> <script> $(document).ready(function(){ $('#ntpqBtn').click( function loadOutput(){ var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function(){ if(this.readyState == 4 && this.status == 200){ var ntpqTable = document.getElementById("ntpq"); ntpq.innerHTML = this.responseText; } }; xhttp.open("GET","ntp.php",true); xhttp.send(); }); setInterval(loadOutput,1000); }); </script> 修改代码
<button id="ntpqBtn">加载NTP服务器状态</button>
<pre id="ntpq"></pre>
<script>
$(document).ready(function() {
function loadOutput() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var ntpqTable = document.getElementById("ntpq");
ntpqTable.innerHTML = this.responseText;
}
};
xhttp.open("GET", "ntp.php", true);
xhttp.send();
}
$('#ntpqBtn').click(loadOutput);
setInterval(loadOutput, 1000);
});
</script>
这段代码使用了 jQuery 库来简化代码。在 `$(document).ready` 函数中定义了 `loadOutput` 函数,并将其绑定到按钮的点击事件上。同时,也保留了定时器的逻辑,每隔 1 秒钟就会执行一次 `loadOutput` 函数。
阅读全文