为什么尝试使用我的ajax调用返回的promise时我没有任何数据

Question

I've tried several solutions from this forum and others but nothing seems to work. I'm not sure if this is a logic issue and simply can not be done the way I'd like or if I'm just not accessing the return the right way.

What I'm trying to do is list a set of links (code is in an external file Main.js) and when the link is clicked take the id and use it to make a 2nd ajax call and open will also open a 2nd window (code is in external file Cites.js) with more information about the link clicked.

The problem is I can't get the id from the second ajax call in Main.js to be used in my Cites.js file. I'm trying to return the second ajax call and then use .done() to either get the data returned or try to get the global variable projectId.

Here's the code in my Main.js

var projectId = '';
var promise = $.ajax({
    type: 'GET',
    url: 'https://www.sciencebase.gov/catalog/items?parentId=504108e5e4b07a90c5ec62d4&max=60&offset=0&format=jsonp',
    jsonpCallback: 'getSBJSON',
    contentType: "application/json",
    dataType: 'jsonp'
    }).then(function(json) {
                 var linkBase = "http://www.sciencebase.gov/catalog/item/";
                 var link = "";                     
                 var itemId = "";                    
                 var urlId = "";
                 var itemLinkLength = "";

                 $.each(json.items, function(i,item) {
                     link = linkBase + this.id;

                     $('#sbItems').append('<li><b><a href="' + link + '" id="idNum' + i + ' ">' + this.title + '</a> - </b>' + this.summary + '</li>');                     
                 });                     

                 $('#sbItems a').on('click', function (e) {
                     e.preventDefault();                         

                     var str = $(this).attr('id');                         

                     if (str.length == 7) {                      
                          itemId = str.slice(5,6);
                     } else if (str.length == 8) {
                          itemId = str.slice(5,7);
                     }

                     urlId = json.items[itemId].id;
                     //alert(urlId);

                     return $.ajax({
                                    type: 'GET',
                                    url: 'https://www.sciencebase.gov/catalog/itemLink/' + urlId + '?format=jsonp',
                                    jsonpCallback: 'getSBJSON',
                                    contentType: "application/json",
                                   dataType: 'jsonp',
                                   success: function(json) {
                                            if (json.length > 0) {
                                                projectId = json.id;
                                                window.open('Citations.html', '_self');
                                            } else {
                                                var page = linkBase + urlId;
                                                window.open(page);
                                            }

                                   },
                                   error: function(e) {
                                       console.log(e.message);
                                   }                     
                     }); // END 2nd ajax
                }); // END Click event
}); // END promise

and Here's how I'm calling it in my Cites.js

promise.done(function () {
    alert(projectId);
});

Thanks for the help

Answer 1

You do promise = $.ajax(…).then(function(){…}) - yet the then method does create a new promise for the result of the anonymous function (in old versions of jQuery this was pipe ) - see also pipe() and then() documentation vs reality in jQuery 1.8 .

However, since you don't return anything from the anon function you won't receive anything in promise.done() .

If you want to do a chain ajax->click->ajax->done, you will need to manually build a promise for the click handler.