Jquery 如何创建Ajax加载视图

我已经看过很多次了，但是当我去查这个的时候，似乎没有一个简单的方法，或者至少没有一个网站告诉我它在做什么，为什么

理想情况下，我想做的是创建一个容器（

div

），其中既有加载，也有实际的表单

<div id="mycontainer" class="container">
    <div class="loading">//Image of a loading gif or message
        <div>
            <div class="myactualform">
                <input id="firstname" />
                <input id="btnSend" type="button" />
            </div>
        </div>

//正在加载的gif或消息的图像

我的问题是，我如何使“我的实际形式”隐藏和“加载”显示？因此，加载类占用的空间与“myactualform”占用的空间相同。想象一下，它与更改

z-index

s有关。我很确定这是CSS的问题

注：
我使用了jQuery中的

$（“.classname1”）.hide（）/$（“.classname2”）.show（）

，但问题是div收缩

我在以下位置创建了一个JSFIDLE项目：

---

（其中的HTML代码与此处不同，用于显示扩展版本）

这是一个更新的小提琴，它将淡出您的表单，并淡入按钮

基本上，这些行：

  $(".formstuff").fadeOut().promise().done(function() {
      $('.loading').fadeIn();
  });

这意味着它将首先淡出窗体，等待它完成，然后淡入加载的gif

---

尽管这与

我要找的是把它倒进装东西的容器里。不是一整页

为了回答我的问题，罗格马尔帮助我提出了关于高度和宽度的问题

我的总体解决方案如下：

Html:

            <div id="testit">
                <div style="display: none;" class="loading">
                    My loading message
                </div>
                <div class="formstuff">
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="text" /><br />
                    <input type="button" id="showhide" />
                </div>
            </div>
            <p>This text should not move</p>

---

您应该使用以下代码：

    $(document).ajaxStart(function () {           
        PageLoadWorkerStart();
    });
    $(document).ajaxStop(function () {
        PageLoadWorkerEnd();
    });        

    function PageLoadWorkerStart() {
        $("#PageLoader").css("display", "block");
        $("#LoaderWrapper").css("display", "block");
    }
    function PageLoadWorkerEnd() {
        $("#PageLoader").css("display", "none");
        $("#LoaderWrapper").css("display", "none");
    }

---

您是否试图避免为容器类指定

高度

和

宽度

？如果您的问题是div收缩，那么这是最简单的解决方案。

    $(document).ajaxStart(function () {           
        PageLoadWorkerStart();
    });
    $(document).ajaxStop(function () {
        PageLoadWorkerEnd();
    });        

    function PageLoadWorkerStart() {
        $("#PageLoader").css("display", "block");
        $("#LoaderWrapper").css("display", "block");
    }
    function PageLoadWorkerEnd() {
        $("#PageLoader").css("display", "none");
        $("#LoaderWrapper").css("display", "none");
    }