尝试在 Ajax 之前/期间调用 dimmer/throbber答案

【问题标题】：Trying to invoke dimmer/throbber Before/During Ajax尝试在 Ajax 之前/期间调用 dimmer/throbber
【发布时间】：2012-09-18 16:02:21
【问题描述】：

这是我想要/正在尝试做的事情。

有一个表格。该表单有一个提交按钮。提交按钮的 onMouseDown() 事件是：

<input type='submit' value='Search' name='save' id='save' onmousedown = 'DimOn("test.php", "SearchResultDiv")' />

现在，单击按钮后，我希望它按确切顺序执行三件事。

1) 使页面变暗。

2) 执行 Ajax 查询，并填充搜索结果。

3) 移除 Dim。

编辑：

甚至尝试在 jQuery 对象中使用 beforeSend 和 Complete 事件

function DimOn(sUrl, sElement) 
{
    jQueryAjax(sUrl, sElement);
}

function jQueryAjax(sUrl, sElement) 
{
    $.ajax({
        url: sUrl,
        type: 'GET',
        async: false,
        cache: false,
        timeout: 1000,
        beforeSend: function(){
            $('#dim').fadeIn();
        },  
        complete : function(){
            $('#dim').fadeOut();
        },      
        error: function(){
            return true;
        },
        success: function(msg){ 
            if (msg != '')
                PopulateResponse(msg, sElement, false);
            else 
                PopulateResponse("An Error Has Occured.", sElement, false);
        }
    });
}

目前，它看起来是这样的：

2) 执行 Ajax 查询，并填充搜索结果。

2) 使页面变暗。

3) 移除 Dim。

结果填充的位置（需要十秒钟）并且调光器非常快速地闪烁。

请各位程序员帮帮我，我对这项技术并不陌生，为什么我关闭了异步，试图让事情按顺序发生，但仍然没有 DICE。

【问题讨论】：

您可以用鼠标突出显示您的代码，然后单击“代码”按钮（看起来像{}），这将为您添加非常典型的四个空格垃圾标记。
效果很好...我总是点击标有“代码”的按钮...我想我希望它适用于“代码”

标签： php ajax jquery throbber

【解决方案1】：

我用这个函数解决了这个问题：

function jax(sUrl, sElement, bEval, sType, bAsync) 
{
    $.ajax({
        url: sUrl,
        type: sType,
        async: true,
        cache: false,
        timeout: 30000,
        error: function()
        {
            return true;
        },
        beforeSend: function(){
            $('div#dim').fadeIn(400);
        },  
        complete : function(){
            $('div#dim').fadeOut(200);
            if(sUrl.search(/scroll=true/ig) != -1)
                goToByScroll(sElement);

        },                      
        success: function(msg){ 
            if (msg != '')
            {
                PopulateResponse(msg, sElement, bEval);
            }
            else
            {
                PopulateResponse("An error has occurred.", sElement, bEval)
                //Coming soon, ajax call to php file to log javascript failure.
            }
        }
    });
}

这个 CSS

div#dim
{
    background-color:#000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    opacity:.6;
    height:100%;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:1005;
    display:none;
    cursor:wait;
}

div#dim div
{

    position:relative;
    top:400px;
    z-index:1006;
    text-align:center;
    cursor:wait;
}

div#dim div img
{
    z-index:1007;
    text-align:center;
    border:none;
    cursor:wait;
}

和这个 HTML

<div id='dim'><div style="text-align:center;"><img src="Images/Loading/loading10.gif" alt="Loading... please wait" title="Loading... please wait" /></div></div>

【讨论】：