Question

我试图在循环内调用多个ajax请求以加载多个下拉列表。我尝试了顺序方式，我可以看到仅循环中的最后一项充满了值

 var targetcontrols = [];
        var targetcontrols_array = targetControl.split(',');
        var targetsourcecontrols = [];
        var targetsource_array = targetSource.split(',');
        for(i=0; i < targetcontrols_array.length; i++)
        {
            var control_name=targetcontrols_array[i];
            var source=targetsource_array[i];
            $.ajax({
                url: action_url,
                type: 'POST',
                traditional: true,
                async: false,
                data: JSON.stringify( { allselected: allselected_flag, selectedIds: selectedvalues,targetControl:control_name,  targetSource: source, dependency: dependencyOptions } ),
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function (response) {
                    //To clear existing items
                    var target= $("#"+response.targetControl);
                    target.multiselect('dataprovider', []);
                    var dropdown2OptionList = [];
                    for (i = 0; i < response.values.length; i++) {
                        dropdown2OptionList.push({
                            'label': response.values[i].text,
                            'value': response.values[i].value
                        })
                    }
                    console.log("--control"+control_name);
                    //re initialize the search plugin
                    target.multiselect('dataprovider', dropdown2OptionList);
                    target.multiselect('rebuild');
                }
            });

我如何确保循环中的第一项也被响应值填充

Answer 1

您可以尝试map来生成Promise的数组。之后，使用Promise.all()执行此promises数组。

var targetcontrols = [];
var targetcontrols_array = targetControl.split(',');
var targetsourcecontrols = [];
var targetsource_array = targetSource.split(',');
const arrOfPromises = targetcontrols_array.map(function(item, index) {
  const control_name = item;
  const source = targetsource_array[index];
  return new Promise((resolve) => {
    $.ajax({
      url: action_url,
      type: 'POST',
      traditional: true,
      async: false,
      data: JSON.stringify( { allselected: allselected_flag, selectedIds: selectedvalues,targetControl:control_name,  targetSource: source, dependency: dependencyOptions } ),
      contentType: "application/json; charset=utf-8",
      dataType: 'json',
      success: function (response) {
        //To clear existing items
        var target= $("#"+response.targetControl);
        target.multiselect('dataprovider', []);
        var dropdown2OptionList = [];
        for (i = 0; i < response.values.length; i++) {
          dropdown2OptionList.push({
            'label': response.values[i].text,
            'value': response.values[i].value
          })
        }
        console.log("--control"+control_name);
        //re initialize the search plugin
        target.multiselect('dataprovider', dropdown2OptionList);
        target.multiselect('rebuild');
        resolve(`done for url ${control_name}`) // Show log for checking process
      }
  })
})
  
Promise.all(arrOfPromises)

Answer 2

这2条声明：

var control_name = targetcontrols_array[i];
var source = targetsource_array[i];

可能是导致问题的原因。由于var具有function scope，而for loop是block scope，因此当您使用循环时，这些control_name和source变量已从下一个，用于ajax请求之前。这就是为什么您总是得到最后的。您应将var更改为支持const的{{1}}或let

block scope

Answer 3

首先，如果您使用jquery，请充分利用其潜力，而不要使用for循环，请使用 $.each：

var targetcontrols = [];
        var targetcontrols_array = targetControl.split(',');
        var targetsourcecontrols = [];
        var targetsource_array = targetSource.split(',');
        $.each(targetcontrols_array, function(i, item)
        {
            var control_name=targetcontrols_array[i];
            var source=targetsource_array[i];
            $.ajax({
                url: action_url,
                type: 'POST',
                traditional: true,
                async: false,
                data: JSON.stringify( { allselected: allselected_flag, selectedIds: selectedvalues,targetControl:control_name,  targetSource: source, dependency: dependencyOptions } ),
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function (response) {
                    //To clear existing items
                    var target= $("#"+response.targetControl);
                    target.multiselect('dataprovider', []);
                    var dropdown2OptionList = [];
                    $.each(response.values, function(v, vItems) {
                        dropdown2OptionList.push({
                            'label': response.values[v].text,
                            'value': response.values[v].value
                        })
                    });
                    console.log("--control"+control_name);
                    //re initialize the search plugin
                    target.multiselect('dataprovider', dropdown2OptionList);
                    target.multiselect('rebuild');
                }
            });
        });

循环内的AJAX请求

3 个答案: