Javascript 如何将ajax调用结果传递给后续ajax调用

我目前正试图通过ajax链接利用多个ajax调用，但不确定最佳方法是什么，因为有几种方法可以通过新的框架、jquery和纯javascript实现这一点

我更愿意使用纯香草javascript，因为js上的本机开发近年来有了很大的改进，但是，在多个ajax调用的情况下，我相信还有很多地方需要改进，我相信其中一种方法是使用承诺？我确实看到许多人通过jquery处理这种情况

如果其他程序员能够给出他们的示例，说明如何根据ajax返回的调用值来编写一个现代方法ajax链调用，我将非常感激

简而言之，我试图将第一个ajax调用的值传递给第二个ajax调用，同时确定执行第二个ajax调用的正确方法

下面我添加了带有注释的代码：

// Establish functionality on window load:
window.onload = function() {

    'use strict';

    // get product id on load
    var pid = document.getElementById('pid');
    var colorlist = document.getElementById('colorlist');
    var sizelist = document.getElementById('sizelist');

     colorlist.onclick = function(e) { 
    if (typeof e == 'undefined') e = window.event;

    var colorid = e.target.value

    while (sizelist.firstChild) {
    sizelist.removeChild(sizelist.firstChild);
    }

        // 2ND AJAX CALL
        var xhr = getXMLHttpRequestObject();

        xhr.open('GET', '/ajax/get_sizes.php?id=' + encodeURIComponent(pid.value) + '&colorid=' + encodeURIComponent(colorid), true);
        // set header if sending to php
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(null);

        // Function to be called when the readyState changes:
        xhr.onreadystatechange = function() {

            // Check the readyState property:
            if (xhr.readyState == 4) {

                    // Check the status code:
                    if ( (xhr.status >= 200 && xhr.status < 300) 
                    || (xhr.status == 304) ) {

                    var sizes = xhr.responseText;
                    var sizes = JSON.parse(sizes);

                    for (var i = 0, num = sizes.length; i < num; i++) {

                    var label = document.createElement('label');

                    label.setAttribute ("for", sizes[i].id);
                    label.classList.add("swatch");
                    label.innerHTML = sizes[i].size;

                    var radio = document.createElement('input');

                    radio.type = "radio";
                    radio.id = sizes[i].id;
                    radio.value = sizes[i].id;
                    radio.name = "sizes";

                    sizelist.appendChild(label);
                    sizelist.appendChild(radio);

                    } //END OF FOR LOOP

                } else { // Status error!
                document.getElementById('output').innerHTML = xhr.statusText;
                }

            } // End of readyState IF.

        }; // End of onreadystatechange anonymous function.
    }; // END OF COLORLIST ONCLICK

    // 1ST AJAX CALL
    var ajax = getXMLHttpRequestObject();

        // Function to be called when the readyState changes:
        ajax.onreadystatechange = function() {

            // Check the readyState property:
            if (ajax.readyState == 4) {

                // Check the status code:
                if ( (ajax.status >= 200 && ajax.status < 300) 
                || (ajax.status == 304) ) {

                    var colors = ajax.responseText;
                    var colors = JSON.parse(colors);

                    for (var i = 0, num = colors.length; i < num; i++) {

                        var label = document.createElement('label');
                        label.setAttribute ("for", colors[i].id);
                        label.classList.add("swatch", colors[i].color);
                        label.innerHTML = colors[i].color;

                        var radio = document.createElement('input');

                        radio.type = "radio";
                        radio.id = colors[i].id;
                        radio.value = colors[i].id;
                        radio.name = "colors";

                        colorlist.appendChild(label);
                        colorlist.appendChild(radio);
                    } // END OF FOR LOOP

                } //END OF STATUS CODE CHECK
                    else { // Status error!
                    document.getElementById('output').innerHTML = ajax.statusText;
                    }

            } // End of onreadyState IF.

        }; // End of onreadystatechange anonymous function.

    ajax.open('GET', '/ajax/get_colors.php?id=' + encodeURIComponent(pid.value), true);
    // set header if sending to php
    ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    ajax.send(null); 

}; // End of onload anonymous function.

//在窗口加载时建立功能：
window.onload=函数（）{
"严格使用",；
//加载时获取产品id
var pid=document.getElementById（'pid'）；
var colorlist=document.getElementById（'colorlist'）；
var sizelist=document.getElementById（'sizelist'）；
colorlist.onclick=函数（e）{
如果（typeof e==‘未定义’）e=window.event；
var colorid=e.target.value
while（sizelist.firstChild）{
sizelist.removeChild（sizelist.firstChild）；
}
//第二次AJAX调用
var xhr=getXMLHttpRequestObject（）；
xhr.open（'GET'，'/ajax/GET_size.php？id='+encodeURIComponent（pid.value）+'&colorid='+encodeURIComponent（colorid），true）；
//如果发送到php，则设置头
setRequestHeader（'Content-Type'，'application/x-www-form-urlencoded'）；
xhr.send（空）；
//readyState更改时要调用的函数：
xhr.onreadystatechange=函数（）{
//检查readyState属性：
if（xhr.readyState==4）{
//检查状态代码：
如果（（xhr.status>=200&&xhr.status<300）
||（xhr.status==304））{
变量大小=xhr.responseText；
var size=JSON.parse（size）；
对于（变量i=0，num=size.length；i=200&&ajax.status<300）
||（ajax.status==304））{
var colors=ajax.responseText；
var colors=JSON.parse（colors）；
for（var i=0，num=colors.length；i

---

关于David

您可以使用Promise chain，它可能类似于下面提到的示例：

.then(function(result) {
    return doSomethingElse(result);
    })
    .then(function(newResult) {
    return doThirdThing(newResult);
    })
    .then(function(finalResult) {
    console.log('Got the final result: ' + finalResult);
    })
    .catch(failureCallback);enter code here

您可以查看以下提到的文档：

.then(function(result) {
    return doSomethingElse(result);
    })
    .then(function(newResult) {
    return doThirdThing(newResult);
    })
    .then(function(finalResult) {
    console.log('Got the final result: ' + finalResult);
    })
    .catch(failureCallback);enter code here

---

您可以使用Promise chain，它可能与下面提到的示例类似：

.then(function(result) {
    return doSomethingElse(result);
    })
    .then(function(newResult) {
    return doThirdThing(newResult);
    })
    .then(function(finalResult) {
    console.log('Got the final result: ' + finalResult);
    })
    .catch(failureCallback);enter code here

您可以查看以下提到的文档：

.then(function(result) {
    return doSomethingElse(result);
    })
    .then(function(newResult) {
    return doThirdThing(newResult);
    })
    .then(function(finalResult) {
    console.log('Got the final result: ' + finalResult);
    })
    .catch(failureCallback);enter code here

---

欢迎来到SO，感谢您的提问。我将尽力向您展示一些示例，说明如何以一种可能比您更适合的方式执行代码

回调 什么是回调

简单地说：回调是在另一个函数完成执行后执行的函数，因此名为“回调”

在您的代码示例中，您希望一个接一个地执行至少两个HTTP请求。这意味着一段代码必须执行两次。为此，您可以围绕

XMLHTTPRequestget('/ajax1.php')
  .then(data1 => {
    // Do something with data1.
    get('/ajax2.php')
      .then(data2 => {
        // Do something with data2.
      });
  });

fetch('/ajax1.php')
  .then(response1 => response1.text())
  .then(data1 => {
    // Do something with data1.

    fetch('/ajax2.php')
      .then(response2 => response2.text())
      .then(data2 => {
        // Do something with data2.
      });

  })
  .catch(error => console.log(error));

(async function() {

  const response1 = await fetch('/ajax1.php');
  const data1 = await response1.text();
  // Do something with data1.

  const response2 = await fetch('/ajax2.php');
  const data2 = await response2.text();
  // Do something with data1.

}());