javascript - 按下按钮后使用 AJAX 和 FORM 自动刷新 DIV

Question

我有一个简单的 javascript，我使用 AJAX 为 DIV 提供来自脚本的内容。这仅在用户单击按钮后发生。用户按下按钮（一次）并且 DIV 填充了脚本的 de 输出后我想要什么：

1. 禁用按钮

2. 让 DIV 使用 AJAX 每 5 秒重新加载一次脚本的输出

   <脚本语言="Javascript">

 function xmlhttpPost(strURL) {
        var xmlHttpReq = false;
        var self = this;
        // Mozilla/Safari
        if (window.XMLHttpRequest) {
            self.xmlHttpReq = new XMLHttpRequest();
        }
        // IE
        else if (window.ActiveXObject) {
            self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
        }
        self.xmlHttpReq.open('POST', strURL, true);
        self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        self.xmlHttpReq.onreadystatechange = function() {
            if (self.xmlHttpReq.readyState == 4) {
                updatepage(self.xmlHttpReq.responseText);
            }
        }
        self.xmlHttpReq.send(getquerystring());
    }

    function getquerystring() {
        var form = document.forms['f1'];
        var xword = form.xword.value;
        qstr = 'addpost=' + escape(xword);  // NOTE: no '?' before querystring
        return qstr;
    }

    function updatepage(str){
        document.getElementById("result").innerHTML = str;
    }
    </script>
    <form name="f1">
      <input name="xword" type="hidden" value="someword"> 
      <input value="betaling gereed" type="button" name="btn" onclick='JavaScript:xmlhttpPost("script.php")'></p>
      <div id="result"></div>
    </form>

Answer 1

您正在寻找 JS 时间事件？

w3shools jvascript 时间事件

onclick="setInterval(func(), 5000)"

好的编辑：

我没测试，太晚了

<input id="loadStuffButton" value="betaling gereed" type="button" name="btn" onclick='setInterval(xmlhttpPost("script.php"), 5000);'></p>

function xmlhttpPost(strURL) {
    document.getElementById('loadStuffButton').disabled = true; 
....
}

编辑 2：在 没有 Ajax 的情况下测试这个快速而肮脏的东西，以展示 setIntervalworks 如何使用 5 毫秒呵呵

<form name="f1">
    <input name="xword" type="hidden" value="someword"> 
    <input id="loadStuffButton" value="betaling gereed" type="button" name="btn" onclick='setInterval(function(){xmlhttpPost("script.php")}, 500);'></p>
    <div id="result">
        test

    </div>
</form>
<script>
    i = 1;
    function xmlhttpPost(strURL) {
        document.getElementById('loadStuffButton').disabled = true; 
        updatepage(i++);
    }

    function updatepage(str){
        document.getElementById("result").innerHTML = str;

    }
</script>

Answer 2

使用setTimeout()javascript方法如下：

setTimeout ('xmlhttpPost("script.php")', 5000);

在你的updatepage()方法结束时，调用它。

例如：

function updatepage(str){
    document.getElementById("result").innerHTML = str;
    setTimeout ('xmlhttpPost("script.php")', 5000);
    }

要禁用按钮，您需要在按钮标签中添加一个 id 属性。然后你可以像这样禁用：

document.getElementById('btn').disable();

Answer 3

无限期地重复ajax调用：

var refresh = false,
    btn = document.getElementById("btn");

btn.onclick = function(){
    refresh = true;
    this.disable();
    fetchData("script.php");
}

function fetchData(strURL){
    while(refresh){
        setTimeout(xmlhttpPost(strURL), 5000);
    }
}

和：

<form name="f1">
    <input name="xword" type="hidden" value="someword"> 
    <input value="betaling gereed" type="button" id="btn" name="btn"></p>
    <div id="result"></div>
</form>