如何检查 AJAX 调用是否完成

Question

我有一个页面，我必须通过 ajax 调用绑定几个控件。 国家下拉，州根据所选国家下拉，城市下拉根据所选城市。嵌套数据绑定工作正常。

但是如果我有一些国家、州、城市的初始值并且我必须设置选定的值，那么这不起作用。我正在调用一个函数来设置如下初始值：

function bindandsetvalues(_country, _state, _city){

  // function to bind countries via ajax call. ajax logic is inside this function
  bindcountries();

  if($("#country").length > 0){
    // set selected country
    $("#country").val(_country);

    // function to bind states via ajax call. ajax logic is inside this function
    bindstates(_country);

    if($("#state").length > 0){
      // set selected state
      $("#state").val(_state);
    }
  }
}

但只有国家下拉列表被填充。国家集的初始值和状态下拉列表都不绑定。

我也找到了原因。 调用 bindcountries() 函数后，控制转到 bindcountries() 函数。但是在 bindcountries() 函数内部有一个异步 ajax 调用，所以在调用 ajax 调用之后，控制权返回到调用者函数，而无需等待我调用的 ajax 调用完成

$("#country").val(_country);

但是由于 ajax 异步调用仍在进行中，并且国家/地区下拉列表将在完成 ajax 调用后绑定和呈现。

因此，国家集的初始值和状态下拉列表都不绑定。 所以，我的问题是：有什么方法可以检查或等待 AJAX 异步调用的完成，以便在那之后检查渲染控件的存在 ($("#state").length > 0)/完成 ajax 调用。

我知道 jquery ajax 有 .done、.fail 和 .always 方法，我可以在其中处理后 ajax 调用逻辑。但在上述情况下，我不能使用这些方法。 & 我必须设置超过 8 个这种类型的嵌套控件。

请给我一个解决方案。

Answer 1

你可以使用 .done()

$.ajax({
  url: "url",
  context: document.body
}).done(function() {
  //Write your code here
});

Answer 2

您可以使用 .done 或 .success 方法，例如

$.ajax({
  url  : my_url,
  data : data,
}).done(function() {
   alert('Ajax completed');
});

利用成功

$.ajax({
  url  : my_url,
  data : data,
  success : function(){
      alert('Successfully completed ajax');
  }
});

Answer 3

你也可以这样检查

 $.ajax({
   url: "url",
   statusCode: { 
          200: function() {
          alert("Ajax call successfully completed");
       }

  });

Answer 4

你可以这样检查：

$.ajax({
            type: "POST",
            dataType: 'json',
            url: url,
            contentType: "application/x-www-form-urlencoded",
            data: request,
            xhrFields: {
                withCredentials: true
            },
            success: function(data){
            //it will be called if everything its ok                    
            },
            error:  function (data) {
              //it will be called if there is something bad in your server                   
            }
        });

其中“数据”有您对方法和参数的请求。

希望对你有帮助。

胡安尼托斯

Answer 5

<script>
    function FillState() {
        var countryId = $('#CountryId').val();
        $.ajax({
            url: '/Student/FillState',
            type: "GET",
            dataType: "JSON",
            data: { countryId: countryId },
            success: function (states) {
                $("#StateId").html(""); // clear before appending new list
                $.each(states, function (i, state) {
                    $("#StateId").append(
                        $('<option></option>').val(state.Id).html(state.Name));
                });
            }
        });
    }
</script>




public ActionResult FillState(int countryId = 0)
        {
            db.Configuration.ProxyCreationEnabled = false;
            var states = db.States.Where(x => x.CountryId == countryId).ToList();
            return Json(states, JsonRequestBehavior.AllowGet);

        }


 ViewBag.StateId = new SelectList(db.States.Where(x => x.CountryId == studentDetail.CountryId), "Id", "Name", studentDetail.StateId);


ViewBag.StateId = new SelectList(db.States.Where(x => x.CountryId == 0), "Id", "Name");