Javascript 不显示html的Ajax表单

我有一个基于ajax的反馈表单，在显示响应中的html时遇到了问题

Jquery代码是

$(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');
    });
});

});

$（文档）.ready（函数（）{
var form#U holder=$（“#form holder”）；
var表格持有人反馈=“”；
$（'.submit按钮'）。单击（函数（）{
var name=$（'[name=name]'）。val（）；
var email=$（'[name=email]'）。val（）；
var message=$（'[name=message]'）。val（）；
$.ajax({
url:'email/email.php'，
键入：“POST”，
数据：{name:name，email:email，message:message}，
数据类型：“html”，
})
.success（函数（html）{
表格持有人反馈=html；
控制台日志（表格持有人反馈）；
})
.错误（函数（html）{
表单持有者反馈=“出现错误！”；
})
表格持有人({
“marginLeft”：“840px”
}，300，'swing'，函数（）{
form_holder.css({
“显示”：“无”，
“左边距”：“0”
}).html（表单持有者反馈）.fadeIn（'slow'）；
});
});
});

发生的事情是表单发送数据，处理数据，发送电子邮件。但是php电子邮件文件中的html没有显示出来

---

我添加了

console.log（表单持有者反馈）

在发送表单后测试该值，它会返回php电子邮件发送程序回显的行。

在ajax完成后显示您的

表单持有者

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

将代码放入函数中-

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

---

在ajax完成后，显示您的

表单持有者

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

将代码放入函数中-

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

在调用

表单持有者

后，将执行您的回调（设置

表单持有者

反馈）。您需要将该代码放入回调中。为了避免代码重复，您可能应该将其放在函数中

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

$（文档）.ready（函数（）{
var form#U holder=$（“#form holder”）；
var表格持有人反馈=“”；
var animateForm=函数（）{
表格持有人({
“marginLeft”：“840px”
}，300，'swing'，函数（）{
form_holder.css({
“显示”：“无”，
“左边距”：“0”
}).html（表单持有者反馈）.fadeIn（'slow'）；
});
}
$（'.submit按钮'）。单击（函数（）{
var name=$（'[name=name]'）。val（）；
var email=$（'[name=email]'）。val（）；
var message=$（'[name=message]'）。val（）；
$.ajax({
url:'email/email.php'，
键入：“POST”，
数据：{name:name，email:email，message:message}，
数据类型：“html”，
})
.success（函数（html）{
表格持有人反馈=html；
animateForm（）；
})
.错误（函数（html）{
表单持有者反馈=“出现错误！”；
animateForm（）；
})
});
});

在

表单持有者

调用

表单持有者

后，将执行您的回调（设置

表单持有者

）。您需要将该代码放入回调中。为了避免代码重复，您可能应该将其放在函数中

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

$（文档）.ready（函数（）{
var form#U holder=$（“#form holder”）；
var表格持有人反馈=“”；
var animateForm=函数（）{
表格持有人({
“marginLeft”：“840px”
}，300，'swing'，函数（）{
form_holder.css({
“显示”：“无”，
“左边距”：“0”
}).html（表单持有者反馈）.fadeIn（'slow'）；
});
}
$（'.submit按钮'）。单击（函数（）{
var name=$（'[name=name]'）。val（）；
var email=$（'[name=email]'）。val（）；
var message=$（'[name=message]'）。val（）；
$.ajax({
url:'email/email.php'，
键入：“POST”，
数据：{name:name，email:email，message:message}，
数据类型：“html”，
})
.success（函数（html）{
表格持有人反馈=html；
animateForm（）；
})
.错误（函数（html）{
表单持有者反馈=“出现错误！”；
animateForm（）；
})
});
});

尝试在.html中分配静态文本（“此处为静态文本”）并查看它是否正在更改div的文本。如果您没有在那里得到它，则表示form_holder.animate（{…blocktry在.html中分配静态文本（“此处为静态文本”）然后查看它是否正在更改div的文本。如果您没有得到它，则表示form_holder.animate（{…block是的，这可以工作，但是有一点代码重复。谢谢。是的，这可以工作，但是有一点代码重复。谢谢。