时间戳

首页 > 解决方案 > 使用 ajax 加载数据不显示加载 div 使用 show/hide 或 block/none 工作

jquery - 使用 ajax 加载数据不显示加载 div 使用 show/hide 或 block/none 工作

问题描述

对于下面的函数，我试图在 ajax 请求从数据库中检索记录时显示加载屏幕。但是有些 jquery show() 和 hide() 函数和 javascript element.style.display="Block" 都没有工作。

 function AdvanceSearch()
{
    document.getElementById('divloading').style.display = "Block";
    var _Pets = 0;
    var _WantPets = 0;
    try {

        $.ajax({
            type: 'post',
            url: '/CommonServices/MatchMe_DetailsAdvanceSearch',
            dataType: 'json',
            async: false,
            //contentType: "application/json; charset=utf-8",
            data: {
                Pets: _Pets,
                WantPets: _WantPets,    
            },

            success: function (data)
            {

                $('#ListOfWhoMatchesMyProfile').html("");
                $('#MatchMePagination').html("");
                var response = JSON.parse(data);
                _responseData = response.Records;
// html string is creating using the records.
                  $('#divloading').delay(2000).hide(20000);

            },

            error: function (ex) {
                document.getElementById('divloading').style.display = "None";
                alert('Failed to Retrieve List of Profile matched with your preferences .' + ex.Text);
               // $('#divloading').show();
            }
        });




    } catch (e)
    {
        alert(e.message);
        document.getElementById('divloading').style.display = "None";
        //$('#divloading').show();
    }

}

我也尝试过使用 async: false 。但这也没有解决我的问题。

标签： jqueryajaxasp.net-mvc

解决方案

做这个。首先摆脱try catch。其次将方法设置回异步。禁用异步将冻结屏幕，直到请求完成。可能是为什么你什么都没看到。当您继续该线程时，它会再次隐藏。第三在 berforeSend 和完成处理程序中设置你的 show() 和 hide()

var _Pets = 0;
var _WantPets = 0;
try {

    $.ajax({
        type: 'post',
        url: '/CommonServices/MatchMe_DetailsAdvanceSearch',
        dataType: 'json',

        //contentType: "application/json; charset=utf-8",
        data: {
            Pets: _Pets,
            WantPets: _WantPets,    
        },
        beforeSend: function(){
            document.getElementById('divloading').style.display = "Block";
        },
        complete: function(){
            document.getElementById('divloading').style.display = "None";
        },
        success: function (data)
        {

            $('#ListOfWhoMatchesMyProfile').html("");
            $('#MatchMePagination').html("");
            var response = JSON.parse(data);
            _responseData = response.Records;

        },

        error: function (ex) {
            document.getElementById('divloading').style.display = "None";
            alert('Failed to Retrieve List of Profile matched with your preferences .' + ex.Text);
           // $('#divloading').show();
        }
    });

推荐阅读