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

Question

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

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

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

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

    <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

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

例如像这样：

$(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);
    });
  });
});

Answer 2

在您的第一个基于 $.when 的版本中，您将在 arguments 伪数组中为每个承诺获得一个单独的条目。这些条目中的每一个依次都是 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');
    });
});

p.s。考虑使用 Array.prototype.map 将元素数组转换为承诺数组而不是 .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"
    });
});

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

Retrieving the index of deferred jquery ajax request using .when.apply()

ajax

jquery

jquery-deferred

asp.net-mvc-5