Question

我正在尝试在带有按钮的表单上添加Ajax，以便在单击按钮时提交表单但不应重新加载。

当前它将整个页面再次呈现在现有页面下方。

$('document').ready(function() {
    var form = $('#contact_us'); // contact form
    var submit = $('button');  // submit button
    var alert = $('#form-status'); // alert div for show alert message

    // form submit event
    form.on('submit', function(e) {
        e.preventDefault(); // prevent default form submit

        $.ajax({
            url: '/contact-us', // form action url
            type: 'POST', // form submit method get/post
            dataType: 'html', // request type html/json/xml
            data: form.serialize(), // serialize form data 
            beforeSend: function() {
                alert.fadeOut();
                submit.html('Sending....'); // change submit button text
            },
            success: function(data) {
                alert.html(data).fadeIn(); // fade in response data
                form.trigger('reset'); // reset form
                submit.html('Send Email'); // reset submit button text
            },
            error: function(e) {
                console.log(e)
            }
        });
    });
});

Answer 1

只要您在/ contact-us的页面没有向您发送格式化数据（例如JSON）并且您不解析它，您将获得整页呈现。为什么？因为：

alert.html(data).fadeIn(); // fade in response data

它只是在整页中淡出。数据是您从/ contact-us获得的一切。要修复它，您必须删除包含整个页面的行，因此您的成功代码应如下所示：

success: function(data) {
                form.trigger('reset'); // reset form
                submit.html('Send Email'); // reset submit button text
            },

另外，我不建议使用alert作为变量名。此名称已被使用。

Ajax再次返回整个页面

1 个答案: