0

我有以下 div，

   <div id="mainoutput">
        <img src="/img/preloader.gif" alt="loading" class="preloader" />
    </div>

我的 AJAX/Jquery 的开头是，

        $(document).ready(function() {
            $(".preloader").hide();
            $("#button").click(function() {
                 $(".preloader").slideToggle( "slow" );
                 var host = $("#hostinput").val();
                 var record = $("#recordinput").val();
                 $.ajax({
                      url : "/cachecheck_ajax",
                      type : "POST",
                      dataType: "json",
                      data : {
                          hostinput : host,
                          recordinput : record,
                          csrfmiddlewaretoken: '{{ csrf_token }}'
                          },
                      success: function(json){

                      do some stuff...

                      $(".preloader").slideToggle( "slow" );
                      $('#mainoutput').html(table).hide().slideToggle( "slow" );

一切正常。我单击提交，预加载器显示，直到我的 ajax 成功启动，预加载器被使用并显示我的主 div (#mainoutput)。

但是，如果我想再次提交，我希望切换（隐藏）#mainoutput，然后再次显示预加载器。最好的方法是什么？

我确实尝试了以下方法，但它刚刚完全破坏了 ajax 并且我的 json 刚刚返回，

    $(document).ready(function() {
        $(".preloader").hide();
        $("#button").click(function() {
             // addition
             if($('#mainoutput').is(':visible'));{
                 $("#mainoutput").slideToggle( "slow" ).html();
             }
             //
             $(".preloader").slideToggle( "slow" );
             var host = $("#hostinput").val();
             var record = $("#recordinput").val();
             $.ajax({
4

1 回答 1

0

我会使用 jQuery.Ajax 的 beforeSend 和 Complete 回调方法。我希望下面的代码对你有帮助！

$(document).ready(function() {
    var xhr = null;
    $(".preloader").hide();

    $("#button").click(function() {
        var host = $("#hostinput").val();
        var record = $("#recordinput").val();

        if (xhr != null) {
            xhr.abort();    //Abort Existing XHR Call
            $(".preloader").hide(); //By Default hide the Element
        }

        //Get Referance in xhr variable
        xhr = $.ajax({
            url : "/cachecheck_ajax",
            type : "POST",
            dataType: "json",
            data : {
                hostinput : host,
                recordinput : record,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            beforeSend: function (jqXHR, settings) {
                $(".preloader").slideToggle( "slow" );  //Before sending to Server, Show the Element
            },
            success: function(json, textStatus, jqXHR) {

                //TODO: Do some stuff...!!!

                $('#mainoutput').html(table).hide().slideToggle( "slow" );
            },
            error: function (jqXHR, textStatus, errorThrown) {
                //TODO: Handle Errors here...!!!
            },
            complete: function (jqXHR, textStatus) {
                //jQuery will delegate call after XHR. So Hide the Element

                $(".preloader").slideToggle( "slow" );
            }
        });
    });
});
于 2013-09-24T20:41:51.760 回答