Вложенный вызов jjery ajax помнит первый ответ HTML во внутреннем вызове ajax

Question

Хорошо. Мне нужно сделать что-то вроде этого:

1) Сделайте запрос GET ajax и запомните ответ HTML в переменной. 2) Внутри этого первого запроса ajax (в функции обратного вызова) мне нужно сделать второй запрос ajax POST и добавить ответ HTML к запомненному ответу HTML первого запроса. 3) Замените div с HTML из переменной.

Вот как я это делаю:

    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);              
                }
            });
        }


    });

Но, как видно из комментария, он не работает. Переменная firstHtml внезапно становится NULL во втором AJAX-запросе.

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);
            }
        });
    }
});