Question

我有一个ajax调用，基于返回，通过影响其url参数调用另一个ajax调用，url被第一个返回修改。这两个调用是相关的，因为第一个调用第二个的url参数，其输出附加到一个全局变量，该变量用于生成最后一组HTML，随后附加在第一个调用中。作为简化示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
var masterHtml = '';

$.ajax({
url: "http://thisisanexample/items",
type: "GET",
asynch: false,
contentType: "application/json;odata=verbose",
headers: {
    "Accept": "application/json;odata=verbose",
    "X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function (data) {
    successHandler(data);
},
error: function (data) {

}
});

function successHandler(data) {
var results = data.d.results;
for (var i = 0; i < results.length; i++) {
    var someHtml = results[i]["someHtml"];
    masterHtml = masterHtml + someHtml;
    var nextThingUrl = results[i]["nextThingUrl"];
    // now go get the other HTML, and append it to the masterHtml, 
    //this is a series of child elements to the someHtml variable above
    $.ajax({
        url: "http://thisisanexample/+ " + nextThingUrl,
        type: "GET",
        asynch: false,
        contentType: "application/json;odata=verbose",
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        success: function (data) {
            successHandlerChildren(data);
        },
        error: function (data) {

        }
    });
    jQuery('#magictime').append(masterHtml);
}
}

function successHandlerChildren(data) {
var results = data.d.results;
for (var i = 0; i < results.length; i++) {
    var someMoreHtml = results[i]["someMoreHtml"];
    masterHtml = masterHtml + someMoreHtml;
}
}

我的问题是第一次ajax调用总是在第二次调用发出之前一直完成所以我得到了第一组HTML，而第二次调用提供了我需要的一些HTML。这弄乱了操作的顺序。我错过了什么？ TIA !!!

Answer 1

异步的选项拼写错误，正确的是：

async：false

Answer 2

您似乎过早地附加了数据。将jQuery('#magictime').append(masterHtml);移至function successHandlerChildren(data)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
var masterHtml = '';

$.ajax({
url: "http://thisisanexample/items",
type: "GET",
asynch: false,
contentType: "application/json;odata=verbose",
headers: {
    "Accept": "application/json;odata=verbose",
    "X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function (data) {
    successHandler(data);
},
error: function (data) {

}
});

function successHandler(data) {
var results = data.d.results;
for (var i = 0; i < results.length; i++) {
    var someHtml = results[i]["someHtml"];
    masterHtml = masterHtml + someHtml;
    var nextThingUrl = results[i]["nextThingUrl"];
    // now go get the other HTML, and append it to the masterHtml, 
    //this is a series of child elements to the someHtml variable above
    $.ajax({
        url: "http://thisisanexample/+ " + nextThingUrl,
        type: "GET",
        asynch: false,
        contentType: "application/json;odata=verbose",
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val()
        },
        success: function (data) {
            successHandlerChildren(data);
        },
        error: function (data) {

        }
    });
}
}

function successHandlerChildren(data) {
var results = data.d.results;
for (var i = 0; i < results.length; i++) {
    var someMoreHtml = results[i]["someMoreHtml"];
    masterHtml = masterHtml + someMoreHtml;
}
jQuery('#magictime').append(masterHtml);
}

＆＃13;

在Ajax Call中调用Ajax，First One总是完成？

2 个答案: