使用 $.when 组合 AJAX 请求并将数据发送到函数答案

【问题标题】：Combining AJAX requests using $.when and sending the data to a function使用 $.when 组合 AJAX 请求并将数据发送到函数
【发布时间】：2015-02-24 17:06:45
【问题描述】：

我有更新页面中需要分开的内容的函数和 AJAX 调用，但是在页面加载时它们需要一起加载，因此我使用 $.when - 但我对在函数之间发送数据和使用 $ 的理解.when 很糟糕 - 我已经查看了几种组合 AJAX 调用的解决方案，但对我来说似乎都失败了。这是我目前的解决方案：

我有 2 个函数运行单独的 AJAX 请求。
然后我从 $.when 调用这些
以正确的 JSON 格式返回数据（在 JSONlint 上验证）但是，当通过 $.当数据以某种方式未设置/丢失时传回时，此时我不明白发生了什么。我可以在 AJAX 函数中输出数据，但如果我尝试从 $.when 函数或 onload_sendData 函数中输出，数据总是“未定义”。

我在传递给函数之前和之后都尝试过 JSON.stringify 和 JSON.parse - 没有区别，当我以这种方式传递给下一个函数后尝试读取数据时，数据总是变得未定义。也许我缺少关于 Javascript 如何传递数据的基本知识，希望有人能提供帮助。

function onload_Categories() {
    $.ajax({
              type: "GET",
              url: '/index/categories',
              ContentType : 'application/json',
              success: function (data1) {
                return data1;
              },
              error: function (jqXHR, textStatus, errorThrown) {
                return errortThrown;
              }
          })
}

function onload_Subscribed() {
    return $.ajax({
              type: "GET",
              url: '/index/getsubscribed',
              ContentType : 'application/json',
              success: function (data2) {
                return data2;
              },
              error: function (jqXHR, textStatus, errorThrown) {
                return errortThrown;
              }
          })
}

function onload_sendData(data1) {
  alert(data1); // "UNDEFINED"
  //processCategories(data1); // send data to populate the page categories
  //processSubscribed(data2); // send data to populate the subscription data
}

  (function($){
      $(window).load(function(){

$.when(onload_Categories(),onload_Subscribed()).then(onload_sendData);

$.when(onload_Categories(),onload_Subscribed()).then(function(data1,data2){


    alert(data1); // "UNDEFINED"
    alert(JSON.parse(data1); // "UNDEFINED"

    })

    })
 })

这是从类别 ajax 函数中检索到的 json 数据的 sn-p：

> [{"categorytitle":"accessories","category_id":"56","parent":"7","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"accessories","category_id":"64","parent":"9","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"accessories","category_id":"72","parent":"11","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"activities","category_id":"57","parent":"7","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"activities","category_id":"81","parent":"15","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"appliances","category_id":"83","parent":"16","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"apps","category_id":"4","parent":"0","count":2,"p_count":2,"ad_ids":"25,27,","rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"auto","category_id":"18","parent":"0","count":1,"p_count":3,"ad_ids":"27,","rem_ads_age":0,"rem_ads_loc":0,"hassub":1},{"categorytitle":"bags","category_id":"32","parent":"1","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"belts","category_id":"25","parent":"1","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"body
> care","category_id":"3","parent":"0","count":0,"p_count":1,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":1},{"categorytitle":"body
> work and
> \n\nrepair","category_id":"101","parent":"18","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"books","category_id":"39","parent":"2","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"business","category_id":"19","parent":"0","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"Business
> insurance","category_id":"110","parent":"105","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"cafes","category_id":"58","parent":"8","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"cameras","category_id":"88","parent":"16","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"car
> hire","category_id":"99","parent":"18","count":1,"p_count":1,"ad_ids":"20,","rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"cars","category_id":"98","parent":"18","count":1,"p_count":1,"ad_ids":"20,","rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"computers","category_id":"86","parent":"16","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"computers
> and
> tablets","category_id":"90","parent":"16","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"consoles
> and
> \n\ngames","category_id":"89","parent":"16","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"cruises","category_id":"63","parent":"9","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0},{"categorytitle":"cufflinks","category_id":"27","parent":"1","count":0,"p_count":0,"ad_ids":0,"rem_ads_age":0,"rem_ads_loc":0,"hassub":0}]

为了彻底，为了您的理解 - 以下是在函数之间传递数据的工作：

function getCategories($c) {

  $.when(

      $.get('/index/categories')

  ).then(function(categories) {

    processCategories(categories, $c);

  });

}

function processCategories(categories, $c) {

var jsonData = JSON.parse(categories); // data OK

etc...

【问题讨论】：

你需要从你的函数中返回承诺：return $.ajax(...)
你可能不得不用蹩脚的话来说，我是一个完全的新手......我试过这个但仍然没有运气 $.ajax({ type: "GET", url: '/index/ categories', ContentType : 'application/json', 成功: function (data1) { return $.ajax(data1);
你把我引向了正确的方向，我想我已经明白你的意思了，谢谢 barm！
看来 $when 也在梳理我的数据响应，这是一个问题

标签： javascript jquery ajax json multiple-instances

【解决方案1】：

对于任何可能好奇的人 - AJAX 需要像这样专门返回：

return $.ajax({
              type: "GET",
              url: '/index/getsubscribed',
              ContentType : 'application/json',
})

使用这些数据，您需要引用第一个索引，因为 AJAX 响应是一个数组。

        $.when(
          onload_Categories(),
          onload_Subscribed()
          ).then(function(data1,data2) {
            var categories = data1[0]; 

// 0 - is your data, 1 - AJAX fail/success response, 2 - other ajax response object data.
              processCategories(categories);
            var subscribed = data2[0];
              processSubscribed(subscribed);

          })

可能是基本的东西，但因为我对这方面还很陌生，所以我失去了几个小时的生命，希望它对某人有所帮助。

更新：

我的服务器不会在单个 $.when 语句中接受 2 个GETS - 第二个总是会收到 500 内部服务器错误 - 我没有看到任何人堆叠了 $.when 语句，但这似乎是唯一的解决方案，对我来说效果很好......

$.when(
          onload_Categories()
          ).then(function(data) {
            var categories = data;
            alert(categories);
              processCategories(categories);
              $.when(
                onload_Subscribed()
                ).then(function(data) {
                  var subscribed = data;
                  alert(subscribed);
                    processSubscribed(subscribed);
                })
          })

【讨论】：