javascript - PreventDefault 的问题。提交表格

Question

我创建了这个 jQuery AJAX 脚本来提交表单:

$(document).ready(function() {

    // process the form
    $('#reviewForm').submit(function(e) {

        $("#reviewError").hide();
        $("#reviewSuccess").hide();

        var formData = {
            'name'              : $('input[name=name]').val(),
            'email'             : $('input[name=email]').val(),
            'description'   : $('input[name=description]').val(),
            'one'           : $('input[name=price]').val(),
            'two'           : $('input[name=location]').val(),
            'three'             : $('input[name=staff]').val(),
            'four'          : $('input[name=service]').val(),
            'five'          : $('input[name=products]').val(),
            'shopID'            : $('input[name=shopID]').val()
        };

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : 'post/review.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
        })
            // using the done promise callback
            .done(function(data) {

                if ( ! data.success) {

                    $("#reviewError").show();

                } else {

                    // ALL GOOD! just show the success message!
                    $("#reviewSuccess").show();

                }
            })

        // stop the form from submitting the normal way and refreshing the page
        e.preventDefault();
    });

});

遗憾的是，表单是通过正常方式提交的，而不是通过 AJAX 提交的。我不知道问题是什么。我尝试过返回 false 等，但根本不起作用。

Answer 1

我认为您在submit();的开头缺少e.preventDefault();并使用 e。

$(document).ready(function(e) {

    // process the form
    $('#reviewForm').submit(function(e) {
         e.preventDefault();
        $("#reviewError").hide();
        $("#reviewSuccess").hide();

        var formData = {
            'name'              : $('input[name=name]').val(),
            'email'             : $('input[name=email]').val(),
            'description'   : $('input[name=description]').val(),
            'one'           : $('input[name=price]').val(),
            'two'           : $('input[name=location]').val(),
            'three'             : $('input[name=staff]').val(),
            'four'          : $('input[name=service]').val(),
            'five'          : $('input[name=products]').val(),
            'shopID'            : $('input[name=shopID]').val()
        };

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : 'post/review.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
        })
            // using the done promise callback
            .done(function(data) {

                if ( ! data.success) {

                    $("#reviewError").show();

                } else {

                    // ALL GOOD! just show the success message!
                    $("#reviewSuccess").show();

                }
            })

    });

});

希望这有帮助。