javascript - 在另一个 ajax 函数中使用 ajax 函数的输出

Question

我正在做的事情的概述:1-用户创建一个由不同元素组成的模板2-他按下按钮:

*第一个ajax函数在自定义模板数据库中创建一个新条目

*第二个ajax函数获取模板的id并将所有元素保存在第二个数据库中，并使用该id作为外键。

第一个 AJAX

var data1 = {}

        data1.ID = "1";
        data1.RName = '<%= Session["Name"] %>';
        data1.RType = '<%= Session["RType"] %>';
        data1.SType = '<%= Session["SType"] %>';

        $.ajax({
            url: '<%= ResolveUrl("~/WebService1.asmx/AddT") %>',
            data: JSON.stringify(data1),
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                alert(result);
                console.log(result);



            },  
            failure: function (jqXHR, textStatus, errorThrown) {
                alert("Status: " + jqXHR.status + "; Error: " + jqXHR.responseText); // Display error message  
            }
        });

这就是它调用的网络服务。

[WebMethod(EnableSession = true)]

    public int AddT(string ID,string RName, string RType, string SType)
    {


        int id1 = Convert.ToInt32(Math.Floor(Convert.ToDouble(ID)));



        Models2.CustomTemplate itemo2 = new Models2.CustomTemplate
        {
            Id = id1,
            Name = RName,
            ReportType = RType,
            StudyType = SType

        };



        using (TestEntities db2 = new TestEntities())
        {
            db2.CustomTemplates.Add(itemo2);
            db2.SaveChanges();

        }

        int id2 = itemo2.Id;

        Session["TheID"] = id2;

        return id2;

    }

它只是创建模板，然后使用我需要的 ID 创建一个 session 变量。

第二个 AJAX

第二个ajax在循环内

$(".Type1").each(function (i, e) {[…]}

简单地循环所有元素并将它们添加到数据库中(每个元素都有自己的ajax函数)

var data = {};

            data.ID = "2";
            data.InitialID = Lid;
            data.Xpos = Xcoord;
            data.Ypos = Ycoord;
            data.Itemwidth = object1.width;
            data.Itemheight = object1.height;
            data.CTid = '<%= Session["TheID"] %>';

在这里你可以看到我如何尝试通过 session 变量传递之前ajax的输出(我也尝试过制作一个普通变量，但效果不佳)

$.ajax({

                url: '<%= ResolveUrl("~/WebService1.asmx/AddItemo") %>',
                data: JSON.stringify(data),
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (result) {
                    alert(result);
                    console.log(result);
                },
                failure: function (jqXHR, textStatus, errorThrown) {
                    alert("Status: " + jqXHR.status + "; Error: " + jqXHR.responseText); // Display error message  
                }
            }); 

以及它调用的网络服务:

[WebMethod(EnableSession = true)]

    public Item2 AddItemo(string ID, string InitialID, string Xpos, string Ypos, string Itemwidth, string Itemheight, string CTid)
    {

        int id1 = Convert.ToInt32(Math.Floor(Convert.ToDouble(ID)));
        int id = Convert.ToInt32(Math.Floor(Convert.ToDouble(InitialID)));
        int w = Convert.ToInt32(Math.Floor(Convert.ToDouble(Itemwidth)));
        int h = Convert.ToInt32(Math.Floor(Convert.ToDouble(Itemheight)));
        int x = Convert.ToInt32(Math.Floor(Convert.ToDouble(Xpos)));
        int y = Convert.ToInt32(Math.Floor(Convert.ToDouble(Ypos)));
        int cusID = Convert.ToInt32(Math.Floor(Convert.ToDouble(CTid)));


        Models2.Item2 itemo2 = new Models2.Item2
        {
            Id = id1,
            InitialID = id,
            Itemwidth = w,
            Itemheight = h,
            Xpos = x,
            Ypos = y,
            TemplateID = cusID

        };

        using (TestEntities db2 = new TestEntities())
        {
            db2.Item2.Add(itemo2);
            db2.SaveChanges();

        }


        return itemo2;

    }

问题是，由于 ajax 是异步的，我尝试传递的变量尚未准备好，因此它给了我一个内部错误 500:

ExceptionType:"System.FormatException"
Message:"Input string was not in a correct format."

我尝试了一切我能找到的东西:

1-使用

设置所有 ajax

async:false,

2- 在第一个 ajax 上使用 .done

 $.ajax({}).done(ajax2)

3-$.when(ajax1).then(ajax2);

4-将第二个ajax放入第一个ajax的成功函数中。

5-放到第一个ajax的完整功能中

6-用setinterval添加延迟

我正在考虑创建模板，重定向到第二个页面，我在其中调用第二个 ajax。

请帮助我，我已经被这个问题困扰了好几天了。

Answer 1

您需要检查 Chrome DevTools 中的网络面板。

1. 所有 XHR 都发送成功吗？
2. 所有 XHR 请求参数和响应正文是否正确？

If you are not familiar with this, it is really recommended you to Copy/Paste your XHR here by doing following steps:

1. Right click on the selected XHR item in Network panel in Chrome DevTools;
2. select Copy => Copy as fetch and Copy response.

这是一个简单的伪代码，可以解决您的情况。

// first ajax
$.ajax({
  url: firstAjaxURL,
  success: function (result) {
    // you can get the database ID from "result"
    console.log(result.id);

    $(".Type1").each(function (i, e) {
      // second ajax can take the "result.id" as params
      $.ajax({
        url: secondAjaxURL,
        params: {id: result.id},
        success: function (secondResult) {
          console.log(secondResult);
        }
      })
    }
  }
})

如上面丑陋的代码，当后面的ajax需要第一个ajax的响应内容作为参数时，上面的代码将回调函数放在一个回调函数中，并放在一个回调函数中。如果链中需要 3 个或更多 ajax 怎么办？这个问题被称为“回调 hell ”。解决“Callback Hell”的解决方案有:Promise、generator、async/await。你可以用谷歌搜索一下。