遇到Ajax执行顺序问题 时可以注意看下 ajax 的 async属性
1.ajax默认async是为ture的,当async: true 时,ajax请求是异步的。ajax请求和其后面的操作是异步执行的,那么当页面还未执行完,就可能已经执行了 ajax请求后面的操作。当async:false时,ajax请求为同步,这时Ajax请求将整个浏览器锁死,直到请求结束。
2.例如:
用ajax进行表单提交,添加一个采购计划(一个对象)到数据库里,提交之前需要判断数据库是否有相同的编号(一个字段)
这时就需要在ajax 里调用另外一个ajax,被调用的ajax需要设置 async:false。
下边是我的代码:
提交的ajax
var myflag=true; var addSubmit = function () { var url = "/plan/manage/addSave"; $.ajax({ url:url, type:'post', dataType:'json', data:$('#addPlanForm').serialize(), beforeSend:function () { if($("#accountAdd").val()==""){ $.MsgBox.Alert("温馨提示","计划编号不能为空") return false; } checkNo();//执行此方法时下边的操作不能执行,即checkNo方法要设置成同步的 if(!myflag){ $.MsgBox.Alert("温馨提示","计划编号不能重复") return false; }if($("#amountTotalAdd").val()==""){ $.MsgBox.Alert("温馨提示","金额不能为空") return false; }if($("#accountRefAdd").val()==""){ $.MsgBox.Alert("温馨提示","经费来源不能为空") return false; } return true; }, success:function (data) { if(data.code=='0000'){ alert("操作成功"); window.location.href="/plan/manage/list" }else { alert(data.message); } } }); }
判断是否重复的ajax
var checkNo=function () { var url="/plan/manage/checkPlanNo"; $.ajax({ url:url, type:'post', dataType:'json', async:false, data:{ account: $("#accountAdd").val() }, success:function (data) { if(data.code="0000"){ myflag=data.data; } } }) }
后台:
@RequestMapping("/checkPlanNo") @ResponseBody public AjaxResult checkPlanNo(String account){ AjaxResult result=new AjaxResult(); try { // true ,可用,false 不可用 boolean flag=planService.checkPlanNo(account); result.setCode(AjaxResult.RESULT_CODE_0000); result.setData(flag); }catch (Exception e){ result.setCode(AjaxResult.RESULT_CODE_0001); result.setMessage(e.getMessage()); } return result; }
更多推荐
ajax 执行顺序问题
发布评论