使用 .when.apply() 检索延迟的 jquery ajax 请求的索引

Question

我有一个对象列表，我想使用 ajax 帖子传递给部分视图的未知数量。局部视图只是一个基本表，它在每个局部视图中显示我希望的数据。我可以很好地做到这一点，问题是，我希望每个部分视图都位于单独的 div 元素中，因为我想合并拖放，我认为为此我需要知道拖放的 div id？ （如果我在这里错了，请纠正我）。

这意味着我需要首先动态创建 div 并使用循环 .each() 为它们分配它们的 id 并增加 id 号。我知道我需要在这里使用 .append() 函数，它可以完美地创建 div，正确命名它们。

现在的问题是，我希望对创建的每个 div 元素的部分视图操作执行 ajax 发布请求，并且我想将 html 更改为部分视图响应。我意识到 ajax 调用是异步的，这就是为什么一开始只有最后一个 div 正在更新，所以我将所有请求放在一个数组中并使用 .when.apply().then() 来更改 div 的 html。但是我不知道要更改的 div 的 id；我想如果我可以获取数组中当前项的索引，我可以使用它，但我不知道如何获取它。

有人可以看看我的代码并告诉我是否过于复杂，或者我如何获得我需要为其设置 html 的 div 的索引？

    <script type="text/javascript">
    $(document).ready(function () {
        var modelData = [@Html.Raw(Json.Encode(Model.mappings))][0];
        var divid;
        var ajaxrequests = [];
        $.each(modelData, function (i, item) {
            divid = 'header' + i;
            $('#HeaderData').append('<div id="' + divid + '">Hello</div>');
            ajaxrequests.push($.ajax({
                url: "HeaderFieldMapping",
                type: "POST",
                data: JSON.stringify(item),
                contentType: "application/json; charset=utf-8",
                dataType: "html"
            }));
        });
        $.when.apply($, ajaxrequests).then(function (resultdata) {
            divid = 'header' + [index???];
            $('#' + divid).html(resultdata);
        });
    });
</script>

编辑之前的尝试结果是它不断覆盖最后一个 div 元素

    <script type="text/javascript">
    function rowDropHandler(args) {
        var item = args.data[0];
        alert(item);
    }
    $(document).ready(function () {
        var modelData = [@Html.Raw(Json.Encode(Model.mappings))][0];
        var divid;
        var ajaxrequests = [];
        var intnum = 0;
        $.each(modelData, function (i, item) {
            divid = 'header' + i;
            $('#HeaderData').append('<div id="' + divid + '">Hello</div>');
            ajaxrequests.push($.ajax({
                url: "HeaderFieldMapping",
                type: "POST",
                data: JSON.stringify(item),
                contentType: "application/json; charset=utf-8",
                dataType: "html",
                success: function(resultdata){
                    $('#' + divid).html(resultdata);
            }
            }));
        });
        $.when.apply($, ajaxrequests).then(function (resultdata) {
            alert('done' + resultdata);
        });
    });
</script>

Answer 1

在您的第一个基于$.when 的版本中，您将在arguments 伪数组中为每个promise 获得一个单独的条目。这些条目中的每一个都将是 success 处理程序的三个标准参数的数组。

因此您可以简单地遍历该数组并填写您的 HTML：

$.when.apply($, ajaxrequests).then(function() {
    [].forEach.call(arguments, function(result, index) {
        var divid = 'header' + index;
        var resultdata = result[0];
        $('<div>', {id: divid, html: resultdata}).appendTo('#HeaderData');
    });
});

附言考虑使用Array.prototype.map 将您的元素数组转换为promise 数组而不是.each / push 循环：

var ajaxrequests = modelData.map(function(item, index) { // NB: index unused
    return $.ajax({
        url: "HeaderFieldMapping",
        type: "POST",
        data: JSON.stringify(item),
        contentType: "application/json; charset=utf-8",
        dataType: "html"
    });
});

Answer 2

您的第二批代码更接近于工作。您只需将 Ajax 调用代码包装在 IIFE 中，以在成功触发时保持除数的值。在这种情况下，您不需要承诺：

例如像这样：

$(function() {  // <<< Shortcut for DOM ready handler
  var modelData = [@Html.Raw(Json.Encode(Model.mappings))][0];
  var divid;
  var intnum = 0;
  $.each(modelData, function(i, item) {
    divid = 'header' + i;
    $('#HeaderData').append('<div id="' + divid + '">Hello</div>');
    (function(divid) {
      $.ajax({
          url: "HeaderFieldMapping",
          type: "POST",
          data: JSON.stringify(item),
          contentType: "application/json; charset=utf-8",
          dataType: "html",
          success: function(resultdata) {
            $('#' + divid).html(resultdata);
          }
        )
      }(divid);
    });
  });
});