Ajax表单未显示html

I have an ajax based feedback form and having problems with the form showing the html from the response.

The Jquery code is

$(document).ready(function() {
var form_holder = $('#form-holder');
var form_holder_feedback = '';
$('.submit button').click(function() {
    var name = $('[name=name]').val();
    var email = $('[name=email]').val();
    var message = $('[name=message]').val();

    $.ajax({
        url: 'email/email.php',
        type: 'POST',
        data: {name: name, email: email, message: message},
        dataType: 'html',
    })
    .success(function(html) {
        form_holder_feedback = html;
        console.log(form_holder_feedback);
    })
    .error(function(html) {
        form_holder_feedback = '<strong>There was an error!</strong>';
    })

    form_holder.animate({
        'marginLeft': '840px'
    },300,'swing', function() {
        form_holder.css({
            'display'    : 'none',
            'margin-left': '0'
        }).html(form_holder_feedback).fadeIn('slow');
    });
});

});

What happens is the form sends the data and the data gets processed and the email gets sent. but the html echoed by the php email file is not showing up.

I have added the console.log(form_holder_feedback); to test the value after sending the form and it comes back with the line that is echoed by the php emailer.

Show your form_holder after your ajax is complete

.success(function(html) {
        form_holder_feedback = html;
        console.log(form_holder_feedback);
        showFeedback(form_holder_feedback);
});

put code inside a function -

function showFeedback(fb){
    form_holder.animate({
        'marginLeft': '840px'
    },300,'swing', function() {
        form_holder.css({
            'display'    : 'none',
            'margin-left': '0'
        }).html(fb).fadeIn('slow');
    });
}

Your callbacks (that set form_holder_feedback) are being executed after your .html call on form_holder. You'll need to put that code in the callbacks. To save yourself some code duplication, you should probably put it in a function.

$(document).ready(function() {
    var form_holder = $('#form-holder');
    var form_holder_feedback = '';
    var animateForm = function() {
        form_holder.animate({
            'marginLeft': '840px'
        },300,'swing', function() {
            form_holder.css({
                'display'    : 'none',
                'margin-left': '0'
            }).html(form_holder_feedback).fadeIn('slow');
        });
    }

    $('.submit button').click(function() {
        var name = $('[name=name]').val();
        var email = $('[name=email]').val();
        var message = $('[name=message]').val();

        $.ajax({
            url: 'email/email.php',
            type: 'POST',
            data: {name: name, email: email, message: message},
            dataType: 'html',
        })
        .success(function(html) {
            form_holder_feedback = html;
            animateForm();
        })
        .error(function(html) {
            form_holder_feedback = '<strong>There was an error!</strong>';
            animateForm();
        })
    });
});