Ajax 表单重新加载页面而不是在后台工作答案

【问题标题】：Ajax form reloading page instead of working in the backgroundAjax 表单重新加载页面而不是在后台工作
【发布时间】：2016-10-05 03:09:51
【问题描述】：

首先，根据其他建议，我尝试绕过 preventDefault() 但没有成功。

我的反馈表单使用此 JavaScript 将表单字段传递给“process.php”并返回相关消息（即：“成功”或“失败”）

它正在做它的工作，除了它不是停留在同一个页面'feedback.php'它加载'process.php'页面... {“Data”：“Data Value”}

代码如下：

$(document).ready(
function(){
    $('form').submit(
        function(event){
            var formData =
            {
                'name' : $('input[name=name]').val(),
                'page' : $('input[name=page]').val()
            };

            $('.form-group').removeClass('has-error'); // remove the error class
            $('.error').remove(); // remove the error text

            event.preventDefault();

            $.ajax({
                    type     : 'POST', // define the type of HTTP verb we want to use (POST for our form)
                    url      : 'process.php', // the url where we want to POST
                    data     : formData, // our data object
                    dataType : 'json', // what type of data do we expect back from the server
                    encode   : true
                })

            .done(function(data){
                    if ( ! data.success)
                    {
                        if (data.errors.name)
                        {
                            $('#name-group').addClass('has-error'); // add the error class to show red input
                            $('#nameField').append(data.errors.name); // add the actual error name under our input
                        }
                    }
                    else 
                    {
                        $('form').append('<div class="buttonError">Message Sent!</div>');
                        form.myButton.disabled = true;
                    }
                }
            );

            .fail(function(data){
                    $('form').append('<div class="buttonError">Failed!</div>');
                }
                console.log(data);
            );
            event.preventDefault();
        }
    );
});

【问题讨论】：

检查浏览器控制台是否有任何错误。您可能需要启用“保留日志”（或您的浏览器的等效功能）以在页面导航后保留任何消息
请张贴您的表单html
看起来像 .fail 周围的语法错误。将关闭的} 移动到下方 console.log。 投票结束是一个错字
您的当前代码有问题，我已尝试修复它们。 See pastebin 样品，试一试，让我们知道这是否适合您？同时更新您的问题以解决问题。

标签： javascript ajax forms preventdefault

【解决方案1】：

看起来像调用 $.ajax 的语法错误，应该像这样更正：

    $.ajax({
        type     : 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url      : 'process.php', // the url where we want to POST
        data     : formData, // our data object
        dataType : 'json', // what type of data do we expect back from the server
        encode   : true
    }).done(function(data){
        if ( ! data.success)
        {
            if (data.errors.name)
            {
                $('#name-group').addClass('has-error'); // add the error class to show red input
                $('#nameField').append(data.errors.name); // add the actual error name under our input
            }
        }
        else 
        {
            $('form').append('<div class="buttonError">Message Sent!</div>');
            form.myButton.disabled = true;
        }
    }).fail(function(data){
        $('form').append('<div class="buttonError">Failed!</div>');
        console.log(data);
    });

【讨论】：

【解决方案2】：

删除 HTML 文件中 form 标记中的方法和操作。这看起来不错。如果它不起作用，请告诉我。

【讨论】：

这并不能解决问题。事实上，它甚至不会起作用，因为它只会将表单转换为对当前页面发出的GET 请求。 OP 需要修复他们的 JS 错误
@Phil 在这种情况下他们应该使用控制台来做到这一点。
No kidding