Question

我在JavaScript中创建一个下拉列表，我正在通过Ajax和JSON加载数据，此时我的代码循环通过一组部门并在每次迭代中运行到ajax调用。

我的问题是我的数据似乎是以随机顺序附加的，它可能是按照最快的加载顺序加载。

我希望能够遍历我的Ajax调用并按照我声明的顺序（对于每个部门）附加数据。这是可以做到的吗？

这是我的代码：

//-- Ajax --
var departments = ['Accounts', 'Commercial', 'Installation', 'Production', 'Sales'];
var i;

for (i = 0; i < departments.length; i++) {
    $.ajax({
        type: "POST",
        url: "Default.aspx/EmployeesDropDown",
        data: '{X: "' + departments[i] + '"}',
        contentType: "application/json; charset=utf-8",
        dataType: "text json",
        async: true,
        success: createdropdown,
        failure: function () {
            alert("FAIL!");
        }
    });
}


//-- Creates dropdown --
function createdropdown(data) {
...appends all the data to my drop down list...
  }

感谢您的任何帮助或建议，谢谢您。

编辑：这个问题与相关问题不同，因为我需要能够循环遍历字符串数组，而不是仅根据数字进行迭代。

Answer 1

如果要按照它们在departments数组中显示的顺序加载部门，您可以逐个加载它们，等待每个ajax请求完成，直到您开始下一个请求。

以下是一个例子：

＆＃13;

var departments = ['Accounts', 'Commercial', 'Installation', 'Production', 'Sales'];
var i = 0;

function reqDep(department) {

  /*
  Since i can't use ajax here let's use a promise.
  */

  var p = new Promise(function(res, rej) {
    setTimeout(function() {
      res(department)
    }, 1000)
  })
  return p;

  // This is what you would actually do.

  /*
  var data =  '{X: "' + department + '"}'
  return $.ajax({
    type: "POST",
    url: "Default.aspx/EmployeesDropDown",
    data: data,
    contentType: "application/json; charset=utf-8",
    dataType: "text json",
  });
  */  
}

function initDepartments(index) {
  reqDep(departments[index])
  // Here you would use `.done(function(data...`
  // I am using `.then(function(data...`
  // because of the promise.
  .then(function(data) {
    console.log(data)
    if(i < departments.length) {
      initDepartments(i)
    }
  })
  i++;
};

initDepartments(i)

＆＃13;

AJAX - 等待数据在下一个循环之前追加

1 个答案: