jQuery Ajax表单提交跳转PHP时POST转GET参数丢失问题咨询

表单提交事件触发时显示loading加载动效，原业务逻辑为表单提交完成后跳转至PHP脚本，由该脚本接收处理表单输入的参数。
异常表现：

• 注释Ajax请求success回调中的跳转代码时，火狐开发者工具可观测到变量正常通过POST请求发送
• 取消success回调中location.href跳转行的注释后，提交完成后会出现GET类型请求，控制台请求、请求头中都无法查询到提交的变量参数，表单传参失效

相关代码（jQuery/Ajax） #

$(function(){
    var form = $('#date_range');
    $(form).submit(function(e){
        e.preventDefault();
        $("#loader").show();
        var fData = $(form).serialize();
        var result = $.ajax({
            type: 'POST',
            url: 'test_loading_gif.php',
            data: fData,
            success: function(e){
                $("#loader").hide();
                //location.href = 'test_loading_gif.php';
            }
        });
    });
});

location.href = 'test_loading_gif.php' 本身会触发一次全新的、独立的GET请求，和之前的Ajax POST请求没有关联：

1. 注释跳转代码时，只有Ajax发起的POST请求正常执行，参数传递正常
2. 开启跳转后，Ajax的POST请求其实已经正常发送并执行完成，紧接着location.href触发的新GET请求被开发者工具捕获，你看到的GET请求并不是原Ajax请求转换了类型，而是跳转动作单独发起的新请求，这个请求默认不带任何自定义表单参数，自然查询不到之前POST提交的变量。

根据实际业务场景选对应实现即可：

• 场景1：不需要Ajax做前置校验/前置请求，只是要在表单提交时显示loading
  去掉Ajax拦截逻辑，直接监听表单submit事件触发时展示loading，跟随表单原生提交跳转即可。原生表单设置method="post"时会正常通过POST传参，页面跳转后loading元素随旧页面销毁，无需手动隐藏，逻辑更简单。
• 场景2：必须先通过Ajax发起POST请求做前置处理，处理完成后再跳转到目标PHP页面
  两种传参跳转方式可选：
  • 拼接GET参数跳转：直接把序列化后的表单参数拼接到跳转URL后，写法为location.href = 'test_loading_gif.php?' + fData，注意该方式参数会暴露在URL中，存在长度限制，不适合传递敏感信息、长文本参数
  • 构造隐藏表单做POST跳转：Ajax成功后动态创建一个隐藏表单，设置提交方法为POST、提交地址为目标PHP地址，把表单参数填充为隐藏表单项，触发表单提交即可实现POST跳转，参数不会暴露在URL中，和原生表单提交效果一致。

注意：如果Ajax请求的提交地址和后续跳转的地址是同一个PHP脚本，相当于同一个逻辑触发了两次重复请求，Ajax的那次请求属于冗余请求，直接用原生表单提交加loading的方案即可，没必要额外发起Ajax请求。

内容的提问来源于stack exchange，提问作者SkylarP