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()" />

任何人都可以帮我纠正我的代码，使其工作如下：

在提交表单时显示透明背景以阻止页面。
显示加载图标。
隐藏透明背景并隐藏加载图标。

全部谢谢

Answer 1

将content设置为隐藏。你可以这样做：

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

在发送AJAX请求之前将其显示。

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

在提交来自时显示AJAX Loader

1 个答案: