php - 在提交来自时显示 AJAX 加载器

Question

我想在用户尝试提交表单时显示一个 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. 隐藏透明背景并隐藏加载图标。

谢谢大家

Answer 1

设置你content的隐藏。你可以简单地做到这一点：

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

在发送 AJAX 请求之前使其可见。

document.getElementById("content").style.display = "block";​​​​​​
xmlHttp.send(null);