Javascript 为内容添加不同的数字

所以我想获得大约6000个个人资料的信息，每个个人资料都有链接，链接的具体数字从1到6000。我想在一个页面中从他们的个人资料中获得一个特定的图像。下面是为用户1的配置文件获取它的代码。。。如果显示u1，则需要用每个不同的数字替换1

<span id="boutiqueimage"></span>
<script>$('#boutiqueimage').load('/u1 #field_id14 dd')
                                      </script> 

$（“#图像”）.load（“/u1#字段id14 dd”）

乍一看，一个简单的循环似乎可以解决问题，但问题不一定是获取图像，而是获取图像后如何处理。为此，您不想使用

.load（）

，因为它不在您的用例范围之内。（假设您希望将提取的内容设置为元素，但希望将提取的内容附加到元素。）

为此，我们需要执行与

.load（）

几乎相同的功能，让我们看看。看起来这只是对

.ajax（）

的标准调用，其成功处理程序如下：

self.html( selector ?
           jQuery("<div>").append( jQuery.parseHTML( responseText ) ).find( selector ) :
           responseText );

现在，我们不再在

self

上调用

.html（）

，而是在目标元素上调用

append（）

：

$('#boutiqueimage').append(jQuery('<div>').append(jQuery.parseHTML(responseText)).find(selector));

现在我们可以将其包装在AJAX调用中：

jQuery.ajax({
    url: '/u1',
    type: 'GET',
    dataType: 'html'
}).done(function(responseText) {
    $('#boutiqueimage').append(jQuery('<div>').append(jQuery.parseHTML(responseText)).find('#field_id14 dd'));
});

这将产生6000个AJAX请求，其中每个请求的

url

与循环中的

i

值不同。请记住，不能保证响应的顺序与请求的顺序相同。因此，生成的图像不太可能从1-6000进行排序

编辑：为了响应评论，也许以串行方式而不是并行方式运行请求会有所帮助。让我们将操作封装到一个函数中，并从它自己的成功处理程序调用它。也许是这样的：

function fetchImage(id) {
    jQuery.ajax({
        url: '/u' + id,
        type: 'GET',
        dataType: 'html'
    }).done(function(responseText) {
        $('#boutiqueimage').append(jQuery('<div>').append(jQuery.parseHTML(responseText)).find('#field_id14 dd'));
        if (id < 6000) {
            fetchImage(id + 1);
        }
    });
}
fetchImage(1);

函数获取图像（id）{
jQuery.ajax({
url:'/u'+id，
键入：“GET”，
数据类型：“html”
}).done（函数（responseText）{
$（'#image'）.append（jQuery（''）.append（jQuery.parseHTML（responseText））.find（'#field_id14 dd'）；
如果（id<6000）{
获取图像（id+1）；
}
});
}
获取图像（1）；

---

这将大大降低加载速度，因为一次只能加载一个。但是我想6000个同时请求在一开始不是一个好主意：）这也将按顺序加载它们，这是一个额外的好处。

假设您发布的代码适用于配置文件1，并且配置文件的编号从1到6000，并且您不想分页，那么请尝试此方法。注意：访问该片段会导致下载整个页面！ 更好的解决方案是设置一个只返回必要html的服务器进程

var max = 6000,cnt=1;
function loadNext() {
  $("#container").append('<span id="boutiqueimage'+cnt+'"></span>'); // add a span
  $('#boutiqueimage'+cnt).load('/u'+cnt+' #field_id14 dd', 
    function (responseText, textStatus, req) { // if error
      if (textStatus == "error") {
        $('#boutiqueimage'+cnt).html("image "+cnt+" not found");
      }
      else {
        if (cnt<max) {
          cnt++;
          loadNext(); 
        }
      }
  });
}

$(function() {
  loadNext(); //start
});

var max=6000，cnt=1；
函数loadNext（）{
$（“#容器”）.append（“”）；//添加跨度
$（“#图像”+cnt）.load（“/u”+cnt+”#字段_id14dd”，
函数（responseText、textStatus、req）{//if错误
如果（textStatus==“错误”）{
$（“#图像”+cnt）.html（“图像”+cnt+“未找到”）；
}
否则{
如果（cntWell，您可以通过调用
.load（）获取图像）
在循环中。但是当前的设置会导致每个响应覆盖目标元素中的前一个响应。您想对所有6000个图像做什么？将它们全部添加到该元素中？它们的顺序重要吗？@David有些甚至可能没有图像，而有些则会，我基本上想获得它们以便显示它们所有人都可以查看不同用户的图片，让其他人也可以看到。你能告诉我一个更好的方法，让他们像你说的那样都进入一个循环吗？@mplungjan一些个人资料id对帮助不是很有描述性吗？在问题中缺少信息，这是我发布的，直到给出更多信息。你想附加6000 im吗年龄到精品图片？而/u1到底返回了什么？@mplungjan我在下面向另一个成员发布了一条类似的评论，并提供了详细信息和链接。基本上，u1是我自己的第一个用户，每个成员都有一个不同的编号，按照他们加入的顺序排列。我想从他们的每个个人资料中获取主图片。这是mine以引用实际页面和编码。当我打开控制台时，它似乎正在做一些事情。我收到此错误消息：加载资源失败很多：服务器响应状态为503（服务暂时不可用）还有一些未捕获的TypeError:undefined不是一个函数，我知道有些函数可能没有图像，但希望显示这两个代码以获得帮助？这是一个非常糟糕的建议，在循环中获取6000个图像。而是在成功接收每个图像后执行下一次获取。@LeandraKatelyn:我用修改过的方法更新了答案，可能是这样的值得一试。@mplungjan:这一点很好。我想我当时正在实施，但我甚至没有注意到规模。6000个同时请求可能…不太理想。我已经更新了答案。谢谢！@David hmm它不起作用，也许有更好的方法来实现这一点。这是一个实际的页面，我想看一下，但我不想看o获取页面上的主图像，即字段14…也许您还有其他建议，比如让他们从这里上传到php存储或其他什么？我不太确定这一切是如何工作的，但如果您有任何想法，我将非常感谢您的帮助，否则谢谢您的尝试。
for (var i = 1; i <= 6000; i++) {
    jQuery.ajax({
        url: '/u' + i,
        type: 'GET',
        dataType: 'html'
    }).done(function(responseText) {
        $('#boutiqueimage').append(jQuery('<div>').append(jQuery.parseHTML(responseText)).find('#field_id14 dd'));
    });
}

function fetchImage(id) {
    jQuery.ajax({
        url: '/u' + id,
        type: 'GET',
        dataType: 'html'
    }).done(function(responseText) {
        $('#boutiqueimage').append(jQuery('<div>').append(jQuery.parseHTML(responseText)).find('#field_id14 dd'));
        if (id < 6000) {
            fetchImage(id + 1);
        }
    });
}
fetchImage(1);

var max = 6000,cnt=1;
function loadNext() {
  $("#container").append('<span id="boutiqueimage'+cnt+'"></span>'); // add a span
  $('#boutiqueimage'+cnt).load('/u'+cnt+' #field_id14 dd', 
    function (responseText, textStatus, req) { // if error
      if (textStatus == "error") {
        $('#boutiqueimage'+cnt).html("image "+cnt+" not found");
      }
      else {
        if (cnt<max) {
          cnt++;
          loadNext(); 
        }
      }
  });
}

$(function() {
  loadNext(); //start
});

<div id="container"></div>