Question

我正在使用jQuery构建页面，通过网站上的ajax获取数据。

我有一个数据集，我循环，创建了许多具有唯一ID的div。然后我创建一个ajax请求，使用success函数来填充这些div的内容。

我遇到的问题是，当运行成功函数时，它不知道要更新哪个div。

代码看起来像这样（从内存中写出来）。

<div id="page"></div>
...
var counter = 1;
["intro","about","links"].each( function (index) {
   var frag='<div id="id_'+counter+'"></div>\n";
   $("#page").append(frag);
   $.ajax({
      url: "/data/"+index,
      success: function (response) {
         $("#id_"+counter).html(response.responseText);
      }
   });
   counter++;
}

我认为我遇到的问题是，当ajax函数返回时，计数器达到3，因此对于所有请求，＃id_ + counter为＃id_3，而不是id_1，id_2和id_3。

应该写这个请求的正确方法是什么？

Answer 1

而不是迭代一个简单的字符串列表。您可以将该部分与其目标元素一起存储为对象，然后进行迭代。

<div id="introDiv"></div>
<div id="aboutDiv"></div>
<div id="linksDiv"></div>

var sections = [
    { section: "intro", target: "introDiv" },
    { section: "about", target: "aboutDiv" },
    { section: "links", target: "linksDiv" }
];

$.each(sections, function(index, value) {
    $.ajax({
        url: "/data/" + index,
        method: "get"
    })
    .then(function(result) {
        $("#" + value.target).html(result);
    });
});

您也可以动态创建元素，但我将它们设置为静态以说明映射。您还需要一个委托来查找动态创建的元素。

如果您想要数字ID ...您甚至不需要知道目标，因为它们都是在运行中创建的。

var sections = ["intro", "about", "links"];
$.each(sections, function(index, value) {
    $.ajax({
        url: "/data/" + index,
        method: "get"
    })
    .then(function(result) {
        var div = $("<div></div>").attr({ id: "id_" + index });
        div.html(result);
        $("#page").append(div);
    });
});

但是你无法保证响应的顺序 - 这是异步请求的本质。

Answer 2

只需将Ajax设置为同步运行，这样每个循环都会等待Ajax完成，然后再递增counter。

var counter = 1;
["intro","about","links"].each( function (index) { 
    var frag='<div id="id_'+counter+'"></div>\n"; 
    $("#page").append(frag); 
    $.ajax({ 
        url: "/data/"+index, 
        success: function (response) { 
            $("#id_"+counter).html(response.responseText); 
        },
        async: false
    }); 
    counter++; 
}

Answer 3

您不需要counter变量，您可以使用index这应该按照您的意愿工作，因为您没有增加它，而是由它管理环。

我没有测试过，所以我不确定它是否按预期工作。

["intro","about","links"].each( function (index) { 
    var frag='<div id="id_'+(index+1)+'"></div>\n"; 
    $("#page").append(frag); 
    $.ajax({ 
        url: "/data/"+index, 
        success: function (response) { 
            $("#id_"+(index+1)).html(response.responseText); 
        }
    });
}

Answer 4

理想情况下，您可以让服务器将索引作为ajax响应的一部分发回。然后你可以做这样的事情：

<div id="page"></div>
...
var counter = 1;
["intro","about","links"].each( function (index) {
   var frag='<div id="id_'+counter+'"></div>\n";
   $("#page").append(frag);
   $.ajax({
      url: "/data/"+index,
      data: {index: index},
      success: function (response) {
         $("#id_"+response.index).html(response.responseText);
      }
   });
   counter++;
}

或者，您可以让服务器解析URL文本中的索引，而不是发送data: {index: index}。

使用jQuery

4 个答案: