javascript - 确定 ajax 调用已完成以运行另一个 ajax 调用

Question

在我的项目中，我有一些选择选项组，它们根据先前的值加载ajax数据。现在，当我尝试将它们复制到另一个选择选项组时遇到问题。

这是场景

parmanet address              Present Address
Division                      Division    
District                      District
Upzilla                       Upzilla
Union                         Union  

它们都是选择字段，选择每个字段后，下一个选择由ajax加载的选项。我放置了一个复选框，当用户单击该复选框时，永久地址数据应通过所有 ajax 调用复制到当前地址。

现在的问题是，jquery“val”函数不起作用，因为它在从ajax加载数据之前运行。如果我将延迟设置为 100 毫秒，它可以工作，但这不是正确的方法。有没有更好的办法解决这个问题？

这是我更改分区以将ajax数据加载到分区时的代码，其他选项与此相同。

$('#divisions').change(function() {
    $("#villtable").hide();
    $("#villaddform").hide();
    $.ajax({
      type: 'post',
      url: 'GetDistricts',
      data: {
        get_option:this.value
      },
      success: function(response) {
        document.getElementById("districts").innerHTML=response;
      }
    });
  });

这就是我尝试将数据复制到当前地址组的内容...

$.when( $('.division-prese').val(divi).trigger('change').delay( 100 ) ).then(function() {
    $.when( $('.district-prese').val(dist).trigger('change').delay( 100 ) ).then(function() {
        $.when( $('.upazilla-prese').val(upaz).trigger('change').delay( 100 ) ).then(function() {
                        $('.union-prese').val(unio).trigger('change');
        });   
    });
});

我也尝试过“完成”，但仍然不起作用。

Answer 1

提取逻辑并在两个地方使用它的总体思路，其中之一执行 promise 链。

function loadDistricts ($divisions) {
	return $.ajax({
		type: 'post',
		url: 'GetDistricts',
		data: {
		  get_option: $divisions.val()
		},
		success: function(response) {
			$('#districts').html(response);
		}
	  });
}

//... other methods

var $divisions = $('#divisions');
var $districts = $('#districts');
var $upazillas = $('#upazillas');

$divisions.change(function() {
    $("#villtable").hide();
	$("#villaddform").hide();
	loadDistricts($divisions);
});

//... other change methods

$('.division-prese').val(divi);

loadDistricts($divisions).then(function(){
	$('.district-prese').val(dist);

	loadUpazillas($upazillas).then(function(){
		$('.upazilla-prese').val(upaz);

		//call next thing
	});
});