点击jQuery切换类

Question

我有以下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({

Answer 1

我将使用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" );
            }
        });
    });
});