Question

我有2个JAVASCRIPT API我正在使用JQUERY进行调用。我想在第二次调用DOM时附加HTML。

第一个电话会抓取一些数据。我循环遍历这些数据的长度，为每个索引进行第二次调用。

在第二次通话中，我构建了HTMLContent。

完成所有调用后，我将HTMLContent附加到DOM。

我努力将HTMContent返回到第一个调用中，因为我只想在完全构建时附加DOM。在我创建的for循环之外的AND。

我知道我可以在第二次通话中追加完成，但我真的很想知道如何归还。

我想也许我需要创建一个承诺，但不确定这会有所帮助，因为范围仍然会包含在第二个获取请求中.done func

这是我到目前为止所做的。

var gallery = (function($){

    var init,
        firstGetCall,
        secondGetCall,
        HTMLContent = '';

    init = function(){
        // Make first call
        firstGETCall();
    };

    // Declare firstGETCall func
    firstGETCall = function(){
        $.ajax({
            url: 'http://example.com/data.json',
            type: 'GET',
            data: {
                numberOfItems: 10
            }
        })
        .done(function(data) {

            //  Cycle through each data element
            for (var i = 0; i < data.length; i++) {
                // Make second call
                secondGetCall(data[i]);
            };
        })
        .fail(function(error) {
            console.log(error);
        });
        // I want to append the DOM here with the conplete HTMLContent - built up of 10 x <div><img... elements
        // However I'm stuck as to how to return the complete HTMLContent
    };

    // Declare secondGetCall func
    secondGetCall = function(singleData) {

        $.ajax({
            url: 'http://example.com/data-2.json',
            type: 'GET',
            data: {
                type: singleData
            }
        })
        .done(function(data) {

            // Build HTMLContent
            HTMLContent = '<div><img src="' + data.image + ' title="' + data.subTitle + ' alt="Photo"></div>';
            // I do not want to append the DOM here
            // return HTMLContent doesn't work
        })
        .fail(function(error) {
            console.log(error);
        });
    };

    return {
        init: init
    };

})(jQuery);


gallery.init(jQuery);

Answer 1

首先，最重要的一点是：

我想在这里附加DOM ...

无论如何，您无法在上述评论的地方做任何事情！

由于Ajax异步工作（除非你指定相反，但强烈建议不要这样做），你指定的地方的任何语句都会在$.ajax启动后的几微秒内执行，所以很长时间在构建整个HTML之前。

现在这似乎也很奇怪：

我努力让HTMContent回到第一个电话

首先，因为异步模式，您不能期望从Ajax调用的.done()返回任何内容。
但也因为我不明白你为什么要回归＆＃34;已有更高级别的数据。实际上，只有在可用时才会收到通知。

另一方面，我完全同意将HTML仅添加到DOM一次，以减少时间消耗。

然后为了这个工作，我的第一个想法是：为什么不简单地拥有一个独特的服务器功能，返回整套所需的数据，而不是两个不同的数据？

但是，如果由于某种原因它真的不可能，你实际上可能会使Ajax调用同步工作（但你应该避免它）。
在这种情况下，你必须：

在secondGetCall()函数中，稍微修改.done()正文声明，将新数据附加到HTMLContent，而不是仅仅设置它：HTMLContent += '<div>...</div>';。
在两个Ajax调用中的每一个中，将async: false添加到Ajax对象。
编写语句，将HTMLContent附加到您撰写评论的地方的DOM。

从嵌套的jquery ajax get请求返回数据

1 个答案: