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

时间:2016-10-05 03:09:52

标签: javascript ajax forms preventdefault

首先,基于其他建议,我尝试过使用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();
        }
    );
});

2 个答案:

答案 0 :(得分:0)

看起来像调用$ .ajax的语法错误,应该像这样纠正:

@testable

答案 1 :(得分:-1)

删除HTML文件中表单标记中的方法和操作。看起来很好。如果它不起作用,请告诉我。