解决http响应状态为canceled

最近写登录的页面，发现通过ajax请求后台的时候，监控台返回该请求的状态是canceled。

原因

仅仅是由于之前为了在输入账号时让浏览器进行自动补全，而将原先的div更换为了form,而不巧的是之前的登录事件源使用的是button。

而至于为什么status = canceled,是由于在提交时，form action与绑定于button上的click事件会同时触发。form action将表单内容以serach的形式追加至当前url上，url变更后会导致页面重新加载， 而这正是导致post请求在执行后就被终止的原因。

解决方案

form.on("submit(login)",function(data){
        $.ajax({
             url:"/schema/login",
             data:{
                 username:data.field.username,
                 password:data.field.password
             },
             dataType: "json",
             contentType: "application/json; charset=utf-8",
             async:false,
             success:function (res) {
                if("success" == res){
                   window.location.href = "../index.html";
                   return false;
                }
             },
             error:function (res) {
                alert("失败,请重新登录！");
             }
         })
		return false;
	})

最后发现是ajax请求默认是异步的。我把请求改成同步的就行了。设置如下参数：async: false。

其他文章，欢迎关注微信公众号测试架构师养成记。