jquery - 使用 jquery ajax 在一个页面上为多个实体加载数据的常用技术

Question

JS：

$('.product').each(function(){
    $parent = $(this);
    $.ajax({
        url: $parent.attr('url'),
        cache: false,
        dataType: 'text',
        success: function(data){       
            $parent.text(data);
        }
    });
});

对于我想加载一些数据的每种产品，说价格。我知道该each功能不适合这个，因为each不等待async ajax过程完成。

在我的示例中，只有最后一个产品填充了数据。

如何在文档加载时加载每个产品的数据？这种情况有通用技术吗？是一次对所有产品提出请求，还是逐个提出请求？

Answer 1

在 javascript 中创建一个包含所有产品 id 的数组，然后在该数组的间隔上调用 $.ajax，在第一个 ajax 调用的完成事件上，检查数组中是否还有更多产品并再次触发ajax 调用，直到数组为空。这样，您将获得缓冲的产品，而无需并行进行 ajax 调用。

Answer 2

原因：在您的代码$parent中未在本地声明，因此成为全局变量。因此，最后一次迭代将$('.product').each() { .. }其覆盖为$('.product')DOM 中的最后一个元素。

解决方案：如果您更改$parent = $(this);为var $parent = $(this);，它可能会开始正常工作。