Ajax再次返回整个页面

我试图在一个有按钮的表单上添加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)
            }
        });
    });
});

---

只要您的页面在/联系我们没有向您发送格式化数据。如果不解析JSON，就会呈现整个页面。为什么？因为：

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

它只是在整个页面中淡出。数据是您从/联系我们获得的所有信息。要解决此问题，您必须删除行并附加整个页面，因此您的成功代码应如下所示：

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

---

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

谢谢您，丹尼尔，它很有用。现在，你能帮我在重新加载页面后如何显示成功消息吗？我在最后做了类似的事情$'form-status'。文本'SUCCESS'；重新加载页面后，您可以使用PHP的if$\u POST&$\u POST['name']等。如果您的意思是，一旦AJAX请求完成，您必须为成功回调添加逻辑，但只要是完整的页面，就没有必要添加数据。但是，您可以创建另一个php文件，发布到新文件，它可能会返回JSON格式的消息，具体取决于php中的验证逻辑，例如，{'success'：true，'error'：}-当一切正常时，{'success'：false，'error'：'error 1:message'}-当出现错误时，您可以在ajax函数中解析它，并使用ifdata.success进行检查。