Question

我有这样的脚本：

    $("#addk").bind("click", function(event){
        //alert("here!");
        $("#loader-overlay").show();
        $.ajax({
            'async':"False",
            'type': "POST",
            'url': "http://url/feedback/",
            'data': $("#form").serialize(), 
            'success': function(msg){
                $("#errors").html(msg);
                },
            'error' : function(){
                $("#errors").html('<p>fail</p>');
            }
        });
        $("#loader-overlay").hide();
        //return false;
    });

由于某种原因，即使ajax运行几秒钟，装载程序屏幕也不会出现。如果我写

$("#loader-overlay").show();

进入控制台，然后就可以了。

这可能是非常简单的事情，我只能放下手指。

艾伦

Answer 1

您可能应该在ajax请求中显示和隐藏加载作为回调。查看：http://api.jquery.com/jQuery.ajax/#callback-functions

所以，你可以这样做：

$.ajax({..., beforeSend: function(){ /* show the loading thing */ },
    complete: function(){ /* hide the loader */ }});

Answer 2

您的代码基本上是正确的，您正在尝试进行同步调用，因此只有在ajax调用返回时才应执行ajax调用之后的代码。但那里你有一个小错误。试试这个：

async: false

使用"false"等于true，因为它是一个非零长度字符串，因此您将进行异步调用，并且在启动ajax调用后立即隐藏加载程序 - 它不会等待要求结束。

此外，您不需要引用键，因此这种样式也可以起作用：

$.ajax({
    async: false,
    type: "POST",
    url: "http://url/feedback/",
    ....

但为什么你甚至需要让呼叫同步？执行同步呼叫将在呼叫期间挂起所有其他进程，因此可能会分散注意力。如果在ajax调用之前显示loader元素，然后在success处理程序中再次隐藏它，它应该可以正常工作：

$("#addk").click(function(event) {
    $("#loader-overlay").show();
    $.ajax({
        type: 'POST',
        url: 'http://url/feedback/',
        data: $("#form").serialize(),
        success: function(msg){
            $("#errors").html(msg);
            $("#loader-overlay").hide();
        },
        error: function() {
            $("#errors").html('<p>fail</p>');
        }
    });
    return false;
});

jquery ajax loader

2 个答案: