Question

我正在调用ajax函数（ checkConnection ），因为我想要一个返回值，我将 async 选项设置为 false 。然后我还使用 async：false 调用 notificationConfirm ，等待该功能完成，然后使用 getNotifications 更新通知。因为这个过程需要一些时间，我需要通知用户“等待”我在微调器中消失，然后我淡出它。但它不起作用。可以请有人解释我为什么，因为我是jQuery的新手，或者建议我一个可视化ajax调用的方法？我必须提到，如果没有这两个函数调用，fadeIn-fadeOut效果就可以工作。提前谢谢你

 $(document).on('click','.wrapper',function(e){

                if ($(e.target).is('#check-notification')){
                    return;
                }
                else if ($(e.target).is('.send-email')){
                    $(this).find('#spinner').fadeIn('fast');
                    var con = checkConnection("<?php echo site_url('ajax/checkConnection')?>");
                    if (con == "yes"){
                    var url = '<?php echo site_url("ajax/sendMail"); ?>';
                    notificationConfirm($(e.target),url);
                    $(this).find('#spinner').fadeOut('fast');
                    $(document).trigger('getNotifications');
                    }
                    else {
                        alert('No connection');
                    }
                }
                else{
                    if ($('.notifications').is(":visible"))
                        $('.notifications').hide('slow');
                }
        });

第一个功能：

checkConnection = function(url) {
        var res = $.ajax(url,{
            datatype: 'html',
            async: false
        });
        return res.responseText;
    };

第二个功能：

notificationConfirm = function(element, url) {
        var data = {
            "subject": element.parent('.notification-item').find('.notification-subject').text(),
            "profID": element.parent('.notification-item').find('.hidden-prof').text(),
            "date": element.parent('.notification-item').find('.notification-date').text(),
            "code": element.parents('div').attr('id')
        };
        $.ajax({
            type: 'GET',
            datatype: 'html',
            url: url,
            data: data,
            async : false,
            error: function() {
                alert('// error message //');
            },
            success: function(res) {
                alert(res);
            }
        });
    };

Answer 1

显示和隐藏ajax加载器的最佳方法是使用beforeSend和成功回调。你可以使用async:true。如果您需要在ajax请求完成后执行代码，请使用块内成功回调。这是回调的主要原因。因此您不必使用async:false进行ajax调用。例如：

$(document).on('click','.wrapper',function(e){

            if ($(e.target).is('#check-notification')){
                return;
            }
            else if ($(e.target).is('.send-email')){
                $(this).find('#spinner').fadeIn('fast');
                checkConnection("<?php echo site_url('ajax/checkConnection')?>");
            }
            else{
                if ($('.notifications').is(":visible"))
                    $('.notifications').hide('slow');
            }
    });

checkConnection = function(url) {
        var res = $.ajax(url,{
            datatype: 'html',
            beforeSend: function() {
              $("#loading-image").show();
           },
           success: function(msg) {
              $("#loading-image").hide();
              if (msg == "yes"){
                var url = '<?php echo site_url("ajax/sendMail"); ?>';
                notificationConfirm($(e.target),url);
                $(this).find('#spinner').fadeOut('fast');
                $(document).trigger('getNotifications');
              }
              else {
                    alert('No connection');
              }
           }
        });
    };

使用fadeToggle（）微调器伪造AJAX调用

1 个答案: