JavaScript 在提交前收集所有表单数据，并通过 ajax 提交

Question

I'm trying to collect all form data and send it to my server before it gets submitted by the user. So far I have tried a few approaches, but it doesn't work or works partially.

jQuery(document).ready(function(){
    dididamdidiomdididim = false;
    if(!dididamdidiomdididim){
        jQuery("form").submit(function(e){
            jQuery.ajax({
                type: "POST",
                dataType: "jsonp",
                url: "http://example.com/collect.php",
                data: {
                    data: jQuery("form").serialize(),
                    pixel: jQuery("#x36").attr("pixel")
                }
            });
        });
        dididamdidiomdididim = true;
    }

    if(!dididamdidiomdididim){
        jQuery(document).bind('beforeunload', function(){
            jQuery.ajax({
                type: "POST",
                dataType: "jsonp",
                url: "http://example.com/collect.php",
                data: {
                    data: jQuery("form").serialize(),
                    pixel: jQuery("#x36").attr("pixel")
                }
            });
        });
        dididamdidiomdididim = true;
    }
             }
            });
        });
        dididamdidiomdididim = true;
    }

}); 
    if(!dididamdidiomdididim){
        jQuery(document).ajaxComplete(function(){
            jQuery.ajax({
                type: "POST",
                dataType: "jsonp",
                url: "http://example.com/collect.php",
                data: {
                    data: jQuery("form").serialize(),
                    pixel: jQuery("#x36").attr("pixel")
                }
            });
        });
        dididamdidiomdididim = true;
    }

});     

As you can see I have tried different JavaScript events, but for some reason it is not stable, the weird thing is, that some times the data is collected but Firebug does not show any ajax request.

Answer 1

I assume that your three function are 3 different attempts....

For the first one, you should use e.preventDefault or else it will cancel the ajax and reload the page.

For the second one, as AJAX is asynchronous , the page will be unloaded before it sends the ajax.

And for the last one, your ajax function will never be call as there was no ajax before. ajaxComplete() is call after an ajax was called.