Question

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

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

Answer 1

乍一看似乎是一个简单的循环可以解决问题，但问题不一定是获取图像，而是在获取时如何处理它们他们。为此，您不希望使用.load()，因为它只是在您的用例之外。（它假设您要将获取的内容设置为元素，但您希望将获取的内容附加到元素。）

为此，我们需要执行与.load()几乎相同的功能，所以让我们看看how it does its thing。看起来它只是对.ajax()的标准调用，将其作为成功处理程序：

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

看起来很简单。我们可以将它简化一点，因为我们知道我们有一个selector值：

self.html(jQuery('<div>').append(jQuery.parseHTML(responseText)).find(selector));

现在，我们不会在.html()上调用self，而是在我们的目标元素上调用append()：

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

我们还需要明确定义selector：

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

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

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

这应该复制.load()的功能以满足我们的需求。现在我们可以把它放在一个循环中：

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'));
    });
}

此应该发出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);

这会加载它们的速度要慢得多，因为它一次只能加载一个。但我认为6000个同步请求首先不是一个好主意:)这也将按顺序加载它们，这是一个奖励。

Answer 2

假设您发布的代码适用于配置文件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
});

使用

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

为内容添加不同的数字

2 个答案: