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提交。我不知道这个问题可能是什么。我试过退货之类的，但根本不起作用。

Answer 1

我认为您缺少e.preventDefault（）在submit（）的开头；并使用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();
                }
            })
    });
});

希望这能有所帮助。

Answer 2

$(document).ready(function() {
    // process the form
    $('#reviewForm').click(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();
    });
});

使用"点击"事件而不是"提交"将明确工作