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();

                }
            })

    });

});

希望这有助于。

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();
    });

});

使用＆＃39;点击＆＃39;事件代替＆＃39;提交＆＃39;肯定会工作

与preventDefault有关。提交表格

2 个答案: