Question

我有一个看起来像这样的Jquery Ajax脚本..

/* Get Values */
function get_values(id){

    var settings = {
        "async": true,
        "crossDomain": true,
        "url": "example.com",
        "method": "GET",
        "headers": {
        "Accept": "application/json",
    },

    "dataType"   : "json",
    "mimeType": "multipart/form-data",
    }

    $.ajax(settings).done(function (response) {
        window[data_ ' + id] = response;    
    });

}


get_values(1);
get_values(2);
get_values(3);

$(".content_loader").fadeOut( function() {
    $(".main_container").html('<div class="results">' + data_1 + data_2 + data_3 +'</div>');
});

正确地从Ajax调用中获取数据并将其保存为3个变量......

_1
_2
data_3

然后它淡出一个微调器动画并淡化显示结果的HTML。

我正在尝试进行设置，以便只有在成功从Ajax调用中获取结果后，微调器和内容才会淡入。

这是回调或类似的工作吗？

Answer 1

我认为，您需要等待所有ajax请求完成。这是战争如何等待所有ajax请求完成。

function get_values(id) {
   var settings = {
        "async": true,
        "crossDomain": true,
        "url": "example.com",
        "method": "GET",
        "headers": {
        "Accept": "application/json",
    },

    "dataType"   : "json",
    "mimeType": "multipart/form-data",
    };

    return $.ajax(settings);
};

$.when(get_values(1), get_values(2), get_values(3)).done(function(r1, r2, r3){
        window['data_1'] = r1;
        window['data_2'] = r2;
        window['data_3'] = r3;

        $(".content_loader").fadeOut( function() {
            $(".main_container").html('<div class="results">' + data_1 + data_2 + data_3 +'</div>');
        });
    });

Answer 2

从$.ajax返回get_values()承诺，并在所有请求完成后运行$.when()

/* Get Values */
function get_values(id) {

  var settings = {
    "async": true,
    "crossDomain": true,
    "url": "example.com",
    "method": "GET",
    "headers": {
      "Accept": "application/json",
    },

    "dataType": "json",
    "mimeType": "multipart/form-data",
  }

  return $.ajax(settings)

}


var req1 = get_values(1),
  req2 = get_values(2),
  req3 = get_values(3);


$.when(req1, req2, req3).done(function(data_1, data_2, data_3) {
  $(".content_loader").fadeOut(function() {
    $(".main_container").html('<div class="results">' + data_1 + data_2 + data_3 + '</div>');
  });

})

Answer 3

恕我直言，全球变量并不好。你可以在ajax完成后传递结果

function getValues(id){

var settings = {
    ...
}

$.ajax(settings).done(function (response) {
    $(".results").html(response)   
}).fail(function(console.log(arguments)));

jQuery等到Ajax调用在显示之前获得数据

3 个答案: