0

ユーザーがフォームを送信しようとしたときに ajax ローダー アイコンを表示し、ページのコンテンツをブロック (フェードイン) したいと考えています。

私はこのコードを持っていますが、正しく動作しません。フォームを送信する前にローダーアイコンを表示し、フォームを送信した後に非表示にします。

<script type="text/javascript">
function ajaxFunction() {
    var xmlHttp;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    }
    catch (e) {
        // Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState == 4) {
            document.getElementById("content").innerHTML = xmlHttp.responseText;
        }
    }
    xmlHttp.open("GET", "?action=sms&pageaction=Send SMS", true);
    xmlHttp.send(null);
}​
</Script>

そして、私は DIV を持っています:

<!---progress-->

<div id="content" > 
  <br/>
  <br/>
  <br/>
  <h1>Loading ... Please wait </h1>
  <br/>
  <br/>
  <img src="image//loading.gif" />
    </div>

<!---progress-->

そして、submitボタンはajaxFunction() 

<input type="submit" name="pageaction"  class="send_sms" value="Send SMS" onclick="ajaxFunction()" />

誰でも私のコードを修正して次のように機能させるのを手伝ってください：

  1. フォームの送信中にページをブロックする透明な背景を表示します。
  2. ローディングアイコンを表示します。
  3. 透明な背景を非表示にし、読み込みアイコンを非表示にします。

全てに感謝

4

1 に答える 1

1

非表示に設定contentします。あなたはそれを簡単に行うことができます：

<div id="content" style="display:none;">
  ...
</div>

AJAX リクエストを送信する前に表示します。

document.getElementById("content").style.display = "block";​​​​​​
xmlHttp.send(null);
于 2012-04-09T06:55:14.707 に答える