button实现ajax异步访问后台成功后window.location.href导致页面不跳转问题

错误案例

前端代码

//            开始抽奖
            function startLunckDraw() {
                var data = {batch:sessionStorage.batch,id:id}
                $.ajax({
                    url:"/GZGA-CJ/act/startLuckDraw",
                    type:"post",
                    data:data,
                    dataType:"json",
                    success:function (data) {
                            if (data.code == 0){

  window.location.href = "/GZGA-CJ/luncky.html";
                            }
                    },
                    error:function (msg) {

                    }
                })
            }

<button type="submit" class="btn btn-default wsh-btn" οnclick="startLunckDraw();" id="luckyStart">开始抽奖</button>

解决方案 把你的 type="submit" 换成type="button"

//原因: 因为有提交了一次表单。你的ajax是同步的，所以提交表单动作被挂起直到ajax完毕后（此时执行请求过一次服务器），表单会提交，这样就会执行页面指定的接口, 而ajax回调success href的链接赋值不成功(这个问题有兴趣的去研究)


参考http://www.cnblogs.com/horsen/p/6933038.html


即：ajax就是如你所想那样执行了，也从A页面跳到了B页面，但是由于submit这种类型的特殊性，又让B页面跳回了A页面，由于这个ajax执行完再执行submit请求的过程处理的很快，你会感到好像没有效果，但是你仔细观察，会发现这个过程页面会刷新的，其实就是B页面跳回到A页面。
就好比sumit后页面刷新了，但在舒心之前去了你要跳转的页面，然后ajax结束了，它又跳回来了。

转载于:https://www.cnblogs.com/sw3828/p/8037963.html