Jquery嵌套ajax调用记住内部ajax调用中的第一个HTML响应

Question

好的。我需要做这样的事情：

1) 发出 GET ajax 请求并记住变量中的 HTML 响应。 2) 在第一个 ajax 请求中（在回调函数中），我需要发出第二个 POST ajax 请求并将 HTML 响应附加到第一个请求的记住的 HTML 响应中。 3) 用变量中的 HTML 替换 div。

这就是我要做的事情：

    var firstHtml;

    $.ajax({
        url: 'page.php',
        success: function(data) {
            firstHtml = data;
            $.ajax({
                type: 'POST',
                url: 'page2.php',
                data: 'param1=a&param2=b',
                success: function(htmlResponse){
                    // the firstHtml var is NULL here... why?
                    var finalHtml = firstHtml + htmlResponse;
                    $('#div').html(finalHtml);              
                }
            });
        }


    });

但正如您从评论中看到的那样，它不起作用。在第二个 AJAX 请求中，变量 firstHtml 突然为 NULL。

Answer 1

试试这个：

$.ajax({
    url: 'page.php',
    success: function(result1) {
        $.ajax({
            type: 'POST',
            url: 'page2.php',
            context: { firstResult: result1 }, 
            data: { param1: 'a', param2: 'b' },
            success: function(secondResult) {
                var finalHtml = this.firstResult + secondResult;
                $('#div').html(finalHtml);
            }
        });
    }
});