1

AJAXを使用してスクリプトからのコンテンツをDIVに供給するために使用する単純なjavascriptがあります。これは、ユーザーがボタンをクリックした後にのみ発生します。ユーザーがボタンを（1回）押した後、DIVにスクリプトの出力が入力された後に必要なもの：

  1. ボタンを無効にする

  2. AJAX を使用して 5 秒ごとにスクリプトの出力をリロードする DIV を用意する

    < スクリプト言語="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>
4

3 に答える 3

0

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>
于 2013-03-15T23:07:02.127 に答える
0

JS Time Events をお探しですか?

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： setIntervalが5ミリ秒でどのように機能するかを示すために、AjaxなしでThis Quick and dirtyをテストしてください

<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>
于 2013-03-15T22:47:17.237 に答える
0

次のようにJavaScriptメソッドを使用setTimeout()します。

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

メソッドの最後で、updatepage()これを呼び出します。

例えば：

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

ボタンを無効にするには、ボタン タグに id 属性を追加する必要があります。次に、次のように無効にできます。

document.getElementById('btn').disable();
于 2013-03-15T22:47:26.450 に答える