来自多个 URL 的 AJAX 请求答案

【问题标题】：AJAX Request from more than one URL来自多个 URL 的 AJAX 请求
【发布时间】：2021-10-18 23:27:22
【问题描述】：

我在下面提供的代码成功地从 SharePoint 网站上的某处提取列表项，然后将它们填充到 div 表中。我没有包含它的代码，因为它不相关。

在显示的第一个函数下是getbytitle API URL。如果我想从具有相同项目的另一个列表中获取，我将如何调用该 URL？

$(function(){
    $("#btnClick").click(function(){
        var fullUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('EmployeeInfo')/items?$select=Title,Age,Position,Office,Education,Degree";
        var fullUrl1 = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Employee2')/items?$select=Title,Age,Position,Office,Education,Degree";
            $.ajax({
              url: fullUrl,
              type: "GET",
              headers: {
                  "accept":"application/json; odata=verbose"
              },
              success: onSuccess,
              error: onError
            });
            $.ajax({
              url: fullUrl1,
              type: "GET",
              headers: {
              "accept": "application/json; odata=verbose"
              },
              success: onSuccess,
              error: onError
            });



  function onSuccess(data) {
     var objItems = data.d.results;
     var tableContent = '<table id="employeeTab" style="width:100%" border="1 px"><thead><tr><td><strong>Name</strong></td>' + '<td><strong>Age</strong></td>' + '<td><strong>Position</strong></td>' + '<td><strong>Office</strong></td>' + '<td><strong>Education</strong></td>' + '<td><strong>Degree</strong></td>' +'</tr></thead><tbody>';
  
     for (var i = 0; i < objItems.length; i++) {
         tableContent += '<tr>';
         tableContent += '<td>' + objItems[i].Title  + '</td>';
         tableContent += '<td>' + objItems[i].Age + '</td>';
         tableContent += '<td>' + objItems[i].Position + '</td>';
         tableContent += '<td>' + objItems[i].Office + '</td>';
         tableContent += '<td>' + objItems[i].Education + '</td>';
         tableContent += '<td>' + objItems[i].Degree + '</td>';
         tableContent += '</tr>';
 }
   $('#employees').append(tableContent);
   }
    function onError(error) {
        alert('Error');
   }
  });
});

【问题讨论】：

您需要再次发出 AJAX 请求
@RoryMcCrossan 我可以让它调用同一个函数“onSuccess”吗？
是的，当然。如果两个响应的格式相同，那么这样做是一种很好的做法。
@RoryMcCrossan 所以我得到了它的工作，我将在这里更新代码。下一个问题是，我如何添加一列来显示哪个列表是哪个？以及如何从被拉出的第二个列表中删除标题行？

标签： javascript html jquery sharepoint

【解决方案1】：

我在下面找到了解决方案。将 url 加载到请求中，您所要做的就是将响应连接到一个数组中。

function loadData(source, url) {
  return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
    .then((r) => {
      if (!r.ok) throw new Error("Failed: " + url);  // Check for errors
      return r.json();  // parse JSON
    })
    .then((data) => data.d.results) // unwrap to get results array
    .then((results) => {
      results.forEach((r) => (r.source = source)); // add source to each item
      return results;
    });
}

window.addEventListener("load", function () {
  Promise.all([
    loadData("AMMODeliverables", "_spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Employee2')/items?$select=Title,Age,Position,Office,Education,Degree";"),
    loadData("DarQDeliverables", "_spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('EmployeeInfo')/items?$select=Title,Age,Position,Office,Education,Degree";"),
    loadData("WTBnDeliverables", 
  ])
    .then(([r1, r2]) => {
      const objItems = r1.concat(r2);

【讨论】：