AJAX 表单提交 - “Return False”和“preventDefault”不起作用答案

【问题标题】：AJAX Form Submission - "Return False" & "preventDefault" not workingAJAX 表单提交 - “Return False”和“preventDefault”不起作用
【发布时间】：2015-06-02 04:24:48
【问题描述】：

我正在使用表单提交工具从 API 获取信息。我要连接的服务器因超时而臭名昭著——所以我在 jQuery 计时器上提交了一个“检查”系统，以确保我没有在等待服务器响应另一个请求。

我遇到的问题是我无法让触发的.submit() 不重新加载页面。无论我使用多少 return false; 或 event.preventDefault() - 要么表单永远不会提交，要么页面重新加载。

干杯。

jQuery(document).ready(function() {

    setInterval(function() {

        var check = jQuery('div#go').length;

        var count = parseInt(jQuery('h3.timer').html());

        count++;

        jQuery('h3.timer').text( count );

        if ( check ) {

            //alert( 'running' );

            jQuery( 'form#woowps_next_page' ).submit(function(event) {

                event.preventDefault()

                jQuery('div#go').remove();

                jQuery.ajax({
                    type: "POST",
                    url: '/wp-content/plugins/wps-woo/inc/category_repair_ajax.php',
                    data: jQuery("form#woowps_next_page").serialize(),
                    success: function(data) {

                        alert( 'win' );

                        var current_page = jQuery('input.woowps_next_page').val();

                        jQuery( 'h3#repair_update' ).text( 'Category Pages Updated:' + current_page );

                        jQuery( 'div#woowps_entry' ).html(data); // show response from the php script.

                        jQuery( '<div id="go"></div>' ).appendTo('div#woowps_entry');

                    },

                        error: function( data ) {

                        alert( 'lose' );

                         var current_page = jQuery('input.woowps_next_page').val();

                        jQuery( 'h3#repair_update' ).text( 'Category Pages Updated: ' + current_page );

                        jQuery( '<div id="go"></div>' ).insertAfter('div#woowps_entry');

                        jQuery('h3.timer').text( '0' );

                    }

                });

            });

        }

    }, 1000);

});

【问题讨论】：

尝试将.submit 函数移动到document.ready 函数中。可能在执行脚本时找不到'form#woowps_next_page'，因为它还没有加载。
为什么要在setInterval 回调中绑定提交处理程序？如果check 是真实的，那么将越来越多的处理程序绑定到该元素，这似乎不正确。但是如果check 是假的，它根本不会绑定提交处理程序......
计时器让我知道表单何时卡住。它必须运行约 17,000 次才能从 API 中获取所有信息。但是我使用计时器来触发对“检查系统”的检查。如果支票在那里，它应该提交。
一旦表单准备好轮询，您应该使用其他东西来禁用/启用表单......不要将它与事件绑定结合起来。
我最初将它作为两个独立的功能。成功了。

标签： php jquery ajax forms

【解决方案1】：

submit(...) 函数将处理程序绑定到表单的提交事件。这意味着您给它的函数在您调用submit(...) 时不会运行，它会在提交表单时运行。所以文档加载后就绑定函数，不用每秒都绑定。

https://api.jquery.com/submit/

为了防止发送多个请求，您可以这样做：

jQuery(document).ready(function() {
    var requestSend = false;

    jQuery('form#woowps_next_page').submit(function(event) {
        event.preventDefault();

        if(!requestSend) {
            requestSend = true;

            jQuery.ajax({
                type: "POST",
                url: '...',
                data: jQuery("form#woowps_next_page").serialize(),
                success: function(data) {
                    requestSend = false;
                    // whatever
                },
                error: function( data ) {
                    requestSend = false;
                    // error handling
                }
            });
        }
    });
});

【讨论】：

【解决方案2】：

已修复！我的退货有问题。这很好，因为我已经解决了这个问题！我不知道您不必通过 AJAX 将 .submit() 数据发送到 POST 它。我保留了计时器功能，因为它让我知道页面何时卡住。这是我的答案：

jQuery(document).ready(function() {

    setInterval(function() {

        var check = jQuery('div#go').length;

        var count = parseInt(jQuery('h3.timer').html());

        count++;

        jQuery('h3.timer').text( count );

        if ( check === 1) {

            jQuery('div#go').remove();

            jQuery.ajax({

                type: "POST",
                url: '/wp-content/plugins/wps-woo/inc/category_repair_ajax.php',
                data: jQuery("form#woowps_next_page").serialize(),
                success: function(data) {



                    var current_page = jQuery('input.woowps_next_page').val();

                    jQuery( 'h3#repair_update' ).text( 'Category Pages Updated:' + current_page );

                    jQuery( 'div#woowps_entry' ).html(data); // show response from the php script.

                    jQuery( '<div id="go"></div>' ).appendTo('div#woowps_entry');

                    alert(current_page);

                 },

                 error: function( data ) {

                     alert('lose');

                     var current_page = jQuery('input.woowps_next_page').val();

                    jQuery( 'h3#repair_update' ).text( 'Category Pages Updated: ' + current_page );

                    jQuery( '<div id="go"></div>' ).insertAfter('div#woowps_entry');

                    jQuery('h3.timer').text( '0' );

                 }
          });

        }

    }, 1000);

});

【讨论】：