使用jquery.ajax（）獲取另一個頁面的子div

Question

我想使用jquery ajax（）加載另一個外部頁面的兩個子級內容。 但是在加載主要內容之前，我希望在加載期間出現一個預加載器，然后只顯示主要內容。 我已提供以下代碼。請幫助我。

 $.ajax({ url: 'notification.html', beforeSend: function(data) { $('#content-here').html(data); }, dataType: 'html', success: function(data) { setTimeout(function() { $('#content-here').html(data); }, 2000); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="preloader-wrapper big active" id="loader"> <div class="spinner-layer spinner-blue-only"> <div class="circle-clipper left"> <div class="circle"></div> </div> <div class="gap-patch"> <div class="circle"></div> </div> <div class="circle-clipper right"> <div class="circle"></div> </div> </div> </div> <h2 style="color:black;">Notification</h2> 

Answer 1

嘗試這個：

$.ajax({
  url: 'notification.html',
  beforeSend: function(data)
  {
    // show ur loading indicator here
  },
  dataType: 'html',
  success: function(data) {
    // hide the loader & append the data to your resulting div
  }
});

Answer 2

HTML：

<h2 style="color:black;">Notification</h2>



<div id="fountainTextG" style="display:none;"><div id="fountainTextG_1" class="fountainTextG">L</div><div id="fountainTextG_2" class="fountainTextG">o</div><div id="fountainTextG_3" class="fountainTextG">a</div><div id="fountainTextG_4" class="fountainTextG">d</div><div id="fountainTextG_5" class="fountainTextG">i</div><div id="fountainTextG_6" class="fountainTextG">n</div><div id="fountainTextG_7" class="fountainTextG">g</div></div>

CSS：

#fountainTextG{
    width:234px;
    margin:auto;
}

.fountainTextG{
    color:rgb(0,0,0);
    font-family:Arial;
    font-size:24px;
    text-decoration:none;
    font-weight:normal;
    font-style:normal;
    float:left;
    animation-name:bounce_fountainTextG;
        -o-animation-name:bounce_fountainTextG;
        -ms-animation-name:bounce_fountainTextG;
        -webkit-animation-name:bounce_fountainTextG;
        -moz-animation-name:bounce_fountainTextG;
    animation-duration:2.09s;
        -o-animation-duration:2.09s;
        -ms-animation-duration:2.09s;
        -webkit-animation-duration:2.09s;
        -moz-animation-duration:2.09s;
    animation-iteration-count:infinite;
        -o-animation-iteration-count:infinite;
        -ms-animation-iteration-count:infinite;
        -webkit-animation-iteration-count:infinite;
        -moz-animation-iteration-count:infinite;
    animation-direction:normal;
        -o-animation-direction:normal;
        -ms-animation-direction:normal;
        -webkit-animation-direction:normal;
        -moz-animation-direction:normal;
    transform:scale(.5);
        -o-transform:scale(.5);
        -ms-transform:scale(.5);
        -webkit-transform:scale(.5);
        -moz-transform:scale(.5);
}#fountainTextG_1{
    animation-delay:0.75s;
        -o-animation-delay:0.75s;
        -ms-animation-delay:0.75s;
        -webkit-animation-delay:0.75s;
        -moz-animation-delay:0.75s;
}
#fountainTextG_2{
    animation-delay:0.9s;
        -o-animation-delay:0.9s;
        -ms-animation-delay:0.9s;
        -webkit-animation-delay:0.9s;
        -moz-animation-delay:0.9s;
}
#fountainTextG_3{
    animation-delay:1.05s;
        -o-animation-delay:1.05s;
        -ms-animation-delay:1.05s;
        -webkit-animation-delay:1.05s;
        -moz-animation-delay:1.05s;
}
#fountainTextG_4{
    animation-delay:1.2s;
        -o-animation-delay:1.2s;
        -ms-animation-delay:1.2s;
        -webkit-animation-delay:1.2s;
        -moz-animation-delay:1.2s;
}
#fountainTextG_5{
    animation-delay:1.35s;
        -o-animation-delay:1.35s;
        -ms-animation-delay:1.35s;
        -webkit-animation-delay:1.35s;
        -moz-animation-delay:1.35s;
}
#fountainTextG_6{
    animation-delay:1.5s;
        -o-animation-delay:1.5s;
        -ms-animation-delay:1.5s;
        -webkit-animation-delay:1.5s;
        -moz-animation-delay:1.5s;
}
#fountainTextG_7{
    animation-delay:1.64s;
        -o-animation-delay:1.64s;
        -ms-animation-delay:1.64s;
        -webkit-animation-delay:1.64s;
        -moz-animation-delay:1.64s;
}




@keyframes bounce_fountainTextG{
    0%{
        transform:scale(1);
        color:rgb(0,0,0);
    }

    100%{
        transform:scale(.5);
        color:rgb(255,255,255);
    }
}

@-o-keyframes bounce_fountainTextG{
    0%{
        -o-transform:scale(1);
        color:rgb(0,0,0);
    }

    100%{
        -o-transform:scale(.5);
        color:rgb(255,255,255);
    }
}

@-ms-keyframes bounce_fountainTextG{
    0%{
        -ms-transform:scale(1);
        color:rgb(0,0,0);
    }

    100%{
        -ms-transform:scale(.5);
        color:rgb(255,255,255);
    }
}

@-webkit-keyframes bounce_fountainTextG{
    0%{
        -webkit-transform:scale(1);
        color:rgb(0,0,0);
    }

    100%{
        -webkit-transform:scale(.5);
        color:rgb(255,255,255);
    }
}

@-moz-keyframes bounce_fountainTextG{
    0%{
        -moz-transform:scale(1);
        color:rgb(0,0,0);
    }

    100%{
        -moz-transform:scale(.5);
        color:rgb(255,255,255);
    }
}

腳本：

$.ajax({
  url: 'notification.html',
  beforeSend: function(data) {
     $("#fountainTextG")[0].style.display="inline";
  },
  dataType: 'html',
  success: function(data) {

    setTimeout(function() {
      $('#content-here').html(data);}, 5000);
  }
  $("#fountainTextG")[0].style.display="none";
});

將此代碼寫入您的頁面以顯示加載文本