使用相同的 HTML div 首次加载页面时如何执行多个 Ajax 调用答案

【问题标题】：How to do multiple Ajax calls when page is first loaded while using the same HTML divs使用相同的 HTML div 首次加载页面时如何执行多个 Ajax 调用
【发布时间】：2020-01-07 11:26:27
【问题描述】：

我目前设置了我的 HTML 站点，我将一个 div id 作为数据传递到我的 Ajax。

<div id="1" class="stats">
    DATA GOES IN HERE
</div>
<div id="2" class="stats">
    DATA GOES IN HERE
</div>

我有它，这样当页面第一次加载时，会加载一个 Ajax 调用，该调用会找到 div id 并在后端使用它来将 DATA 转发。

$(document).ready(function(){
var fId = $(".stats").attr("id");
$.ajax({
    url: 'get_stats',
    type: 'GET',
    data: {fId : fId},
    success: function(data) {
        $("#"+fId).html(data);
    },
    error: function(data){
        alert("ERROR: " + data);
    }
});
});

可以带数据。但是，我有大约 26 个这样的 div，我需要调用 26 次。问题是，调用只进行一次，并且只为第一个 div 加载数据。

我如何才能将所有 26 个 div 中的数据传递到 Ajax 调用中，并在页面首次加载时将其带入 HTML？

【问题讨论】：

所有divs中的数据应该如何组织？一根大绳子？有分隔符吗？一个数组？
页面加载时不要发出 26 个 AJAX 请求。获取所有数据服务器端并将其发送到客户端，而无需进行任何不必要的 AJAX 请求。
@ScottMarcus div中的数据只是字符串值
@RoryMcCrossan 普通的 Javascript 调用也可以吗？
没有。问题在于发出那么多 AJAX 请求，而不是您使用哪个库来发出请求。

标签： javascript jquery html ajax

【解决方案1】：

请试试这个

$(document).ready(function(){
   $(".stats").each((i,e)=>{
     let fId=$(e).attr("id");
     $.ajax({
       url: 'get_stats',
       type: 'GET',
       data: {fId : fId},
       success: function(data) {
         $("#"+fId).html(data);
       },
       error: function(data){
         alert("ERROR: " + data);
       }
     });   
   })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1" class="stats">
    DATA GOES IN HERE
</div>
<div id="2" class="stats">
    DATA GOES IN HERE
</div>

【讨论】：

【解决方案2】：

你可以用这样的循环来做到这一点：

let divs = $(".stats");

$.each(divs, function (div) {
     //..do your ajax request here
});

【讨论】：

你可以，但你真的不应该