AJAX表单提交 - "返回错误" &安培; "的preventDefault"不工作

时间:2015-03-29 00:53:47

标签: php jquery ajax forms

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

我遇到的问题是我无法让触发的.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);

});

2 个答案:

答案 0 :(得分:1)

submit(...)函数将处理程序绑定到表单的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
                }
            });
        }
    });
});

答案 1 :(得分:0)

固定!我遇到了回归问题。哪个好,因为我已经解决了这个问题!我不知道你不必通过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);

});