Question

如何确定是否使用jQuery在Ajax中加载脚本，例如我正在使用以下jQuery / AJAX。

$('#select-countries').change(function(){
    var countryId = $(this).val();
    $.ajax({
        type: 'POST',
        url:  'process.php',
        data: 'countryId='+countryId,
        success: function(states){
            if(states == 'null') {
                $('#select-states-container').html(emptyState);
            } else if(states == '0') {
                $('#select-states-container').html(chooseState);
            } else {
                $('#select-states-container').html(states);
            }   
        }
    });
});

现在根据加载状态我想显示一条消息或显示一个加载gif，我想知道是否存在像加载，完成等的ajax状态？

Answer 1

我所做的是在ajax调用之前弹出一个加载对话框，然后使用ajax＃complete（）删除它或更改mssage：

$.ajax({
    type: 'POST',
    url:  'process.php',
    data: 'countryId='+countryId,
    beforeSend: function(jqXHR, settings) {
       // show the awesome dialog
    },
    complete: function(jqXHR, textStatus) {
       // remove the awesome dialog
    },
    error(jqXHR, textStatus, errorThrown) {
       // post the not so awesome message in the awesome dialog
    },
    success: function(states){
        if(states == 'null') {
            $('#select-states-container').html(emptyState);
        } else if(states == '0') {
            $('#select-states-container').html(chooseState);
        } else {
            $('#select-states-container').html(states);
        } 
        // change the message in the awesome dialog???
    }
});

Answer 2

来自http://api.jquery.com/jQuery.ajax/：

beforeSend（jqXHR，设置）
  预请求回调函数

错误（jqXHR，textStatus，errorThrown）
  请求失败时要调用的函数

成功（data，textStatus，jqXHR）
  如果请求成功则调用的函数。

完成（jqXHR，textStatus）
  请求完成时要调用的函数（执行成功和错误回调之后）。

$.ajax({
    type: 'POST',
    url:  'process.php',
    data: 'countryId='+countryId,
    beforeSend: function() {
        your_loading_function();
    },
    success: function(states){
        if(states == 'null') {
            $('#select-states-container').html(emptyState);
        } else if(states == '0') {
            $('#select-states-container').html(chooseState);
        } else {
            $('#select-states-container').html(states);
        }   
    },
    complete: function() {
        clear_your_loading_message();
    }
});

Answer 3

$('#select-countries').change(function(){
    var countryId = $(this).val();
    $.ajax({
        type: 'POST',
        url:  'process.php',
        data: 'countryId='+countryId,
        beforeSend(jqXHR, settings) {
            // Here is your 'loading' state
            $('#select-states-container').html('Loading...');
        },
        complete: function(jqHXR, status) {
            // Here is your complete state, unbiased of success or fail
            alert('Ajax call completed');
        },
        error:function(jqXHR, textStatus, errorThrown) {
            // Here is your complete state with error
            $('#select-states-container').html(textStatus + ' -- ' + errorThrown);
        },
        success: function(states){
            if(states == 'null') {
                $('#select-states-container').html(emptyState);
            } else if(states == '0') {
                $('#select-states-container').html(chooseState);
            } else {
                $('#select-states-container').html(states);
            }   
        }
    });
});

Answer 4

您可以在此处使用满足您需求的任何全局ajax活动，您可能需要$.ajaxComplete()或$.ajaxSuccess()完成，$.ajaxStart()才能启动。

Answer 5

是的，您可以使用ajaxStart，ajaxSend和ajaxStop在ajax请求中注册处理程序

$('#selected-countries').ajaxStop(function() {
  //do something....
});

请参阅http://api.jquery.com/ajaxStop/

我如何确定是否使用jQuery在Ajax中加载脚本？

5 个答案: