Question

我有一个根据数组中请求对象的数量多次调用的ajax请求。这些对象在数组内部的顺序很重要，需要以相同的顺序反映在动态生成的列表中。当服务器发回每个响应时，我更新<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命令并使用帖子并附加<li>元素附加div之外，基本上都要求相同的事情。

Answer 1

这里有两种可能的策略。

收到回复后立即更新您的用户界面，然后在收到新值时重新呈现
等到所有ajax回复完成后再渲染您的用户界面

对于（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）中每个项目渲染一次但在项目进入时获取更新视图。在（2）中，您只渲染一次，但必须等到所有加载完成。

当然，（1）的变体是你不会重新渲染任何东西，而只是在加载时将项目插入正确的位置。这将更难以调试和更多代码，所以我把它作为读者的练习（使用jquery＆＃39; s $.fn.data来存储原始项目与元素）。

使用特定顺序的ajax响应数据更新列表

1 个答案: