javascript - 按特定顺序使用 ajax 响应数据更新列表

Question

我有一个 ajax 请求，该请求根据数组中请求对象的数量被调用多次。这些对象在数组内部的顺序很重要，并且需要以相同的顺序反射(reflect)在动态生成的列表中。当服务器发回每个响应时，我更新 <ul>如下所示。

     $.ajax({
        type: 'POST',
        url: baseServiceURL + 'report/',
        processData: false,
        dataType: 'json',
        contentType: 'application/json',
        data: payload,
        crossDomain: true,
    })
    .done(function (response) {
        updateUI(response);
    })
    .fail(function (jqXHR, textStatus) {
       // handle failure 
    });


var updateUI = function (response) {
    // Update the drop-down list
    $('#dropdown').append('<li><a class="dd-option" data-value="' + response.ReportName + '" data-path="' + response.ReturnURL + '" href="#">' + response.ReportName + '</a></li>');

    // do more stuf...
};

如何以正确的顺序显示响应的方式动态构建列表？我所做的一件事是添加 order请求的参数，其值是请求对象在数组中的索引。我的想法是我的服务可以在响应中发送回该值，以便 javascript 可以对其进行操作。

编辑:question here基本上问的是同样的事情，除了使用 getJSON 命令并附加 div，我正在使用帖子并附加 <li>元素。

Answer 1

这里有两种可能的策略。

1. 收到响应后立即更新您的界面，然后在收到新值时重新渲染
2. 等待所有 ajax 回复完成，然后渲染您的 UI

对于(1)，您应该只保留所有项目的运行总计

var $dropdown = $('#dropdown');
var renderDropdown = function(reports) {
   //use lodash or underscore.js here cause implementing this manually is annoying
   var sortedSelections = _.sortBy(reports, 'order');
   var htmlPerItem = sortedSelections.map(function(item) {
      return '<li><a ..... </li>';
   });
   $dropdown.html(htmlPerItem.join(''));
}

var reportSelections = [];
payloads.map(function(payload) {
  $.ajax({ ... })
   .then(function(response) {
      reportSelections.push(response);
      renderDropdown(reportSelections);
   })
})

对于(2)，您可以使用 jquery $.when

var gettingResults = payloads.map(function(payload) {
    return $.ajax({ .... });
});
$.when(gettingResults).then(function() {
  //the first arg will be response1, the second response2, etc
  var reportSelections = _.sortBy(arguments, 'order');
  renderDropdown(reportSelections);
});

请注意，在 (1) 中，每个项目渲染一次，但在项目进入时会获得更新 View 。在 (2) 中，您仅渲染一次，但必须等到所有加载完成。

当然，(1) 的一个变体是您不重新渲染任何内容，而只是在加载项目时将其插入到正确的位置。这将更加难以调试并且需要更多代码，因此我将其作为读者的练习(使用 jquery 的 $.fn.data 来存储带有元素的原始项目)。