Question

我正在练习《星球大战》 API（SWAPI），并且正在尝试打印所有行星的名称。但是，行星数据包含在不同的页面中，那么我将如何发出多个AJAX请求以打印所有数据？这是我所拥有的：

for (var i = 1; i <= 7; i++) {
    var xhr = new XMLHttpRequest();
    var link = 'https://swapi.co/api/planets/';
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var planets = JSON.parse(xhr.responseText);
            var responseHTML = '<p>';
            for (i in planets.results) {
                responseHTML += planets.results[i].name;
            }
            responseHTML += planets.results[1];
            responseHTML += '</p>';
            //console.log(planets.results.length);
        }
        document.querySelector('main').innerHTML = responseHTML;
    };
    xhr.open('GET', link);
    xhr.send();
    link += '?page=' + i;
}

Answer 1

我将使用递归函数来代替循环。这样做的原因是它将在触发下一个请求之前等待请求被返回。如果使用循环，则结果可能无法按您期望的顺序返回。

此外，您可以利用fetch发出请求。 fetch是提出AJAX请求的更现代的方式。

请参见下面的代码示例。

// set index to zero
let index = 0;

const performAjaxRequest = index => {
  // fetch request will only be made if index is less than 7
  if (index < 7) {
    // increase index by one below using index++
    // first time code runs it will be 1, second time 2, third time 3...
    // this gives the same effect as using a loop
    index++;

    // make fetch call and add index to the url
    fetch(`https://swapi.co/api/planets/?page=${index}`).then(res => {
       return res.json();
    }).then(res => {

       // this loop is to display each country from the response on the screen
       for (var i = 0; i < res.results.length; i++) {
         document.body.append(res.results[i].name + ', ');
       }
       // below is the key and what makes this a recursive function. 
       // The function calls itself.
       // After the response has been received from the API the function is 
       // called again which which will trigger another fetch request
       performAjaxRequest(index);
    })
  }
}

// trigger initial invocation of the function
performAjaxRequest(index);

Answer 2

$('.checkbox:checkbox:checked').each(function (index, element) {
  $.ajax({
  // your ajax code
  });
});

以上代码用于选中的复选框列表，您正在推送每个复选框的数据

Answer 3

这里的问题是，由于它们是异步请求，您将永远不知道什么时候结束，我通常用这种问题来做递归函数，因此答案将调用具有不同参数的相同函数提出下一个要求。

我认为您想将所有这些请求的答案保存在“ responseHTML”中。像这样：

var link = 'https://swapi.co/api/planets/';
var responseHTML = "";
makeRequest(1,7,link);

function makeRequest(index,max,link)
{
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var planets = JSON.parse(xhr.responseText);
            responseHTML += '<p>';
            for (i in planets.results) {
                responseHTML += planets.results[i].name;
            }
            responseHTML += planets.results[1];
            responseHTML += '</p>';
            //console.log(planets.results.length);
        }

        if(index<=max)
        {
            link += '?page=' + i;
            index++;
            makeRequest(index++,max,link);
        }
        else
        {
            //This means I finished so I put the responseHTML and finish the code.
            document.querySelector('main').innerHTML = responseHTML;
        }
    };
    xhr.open('GET', link);
    xhr.send();
}

如何使用for循环发出多个AJAX请求

3 个答案: