通過ajax傳送post請求向controller傳遞引數後,頁面無法跳轉問題
阿新 • • 發佈:2018-11-30
我的專案之前都是用location.href來向後臺傳遞引數,因為最近在學習ajax,所以將傳值方式改成了ajax傳送post請求,於是問題便接踵而來,我發現在controller中通過返回ModelAndView物件竟然不能實現頁面跳轉了,剛開始百思不得其解,現在總算明白這到底是怎麼一回事了,也想出了一種解決方法,特此記錄下來,方便以後回看
不能跳轉的原因:
ajax實際上是通過XMLHttpRequest來向伺服器傳送非同步請求的,從伺服器獲取資料,然後使用JS來更新頁面,這也就是常說的區域性重新整理實現方式,所以ajax請求之後,伺服器返回的都是純文字流,客戶端的瀏覽器在獲取ajax非同步結果時,不是直接顯示在頁面上,而是要通過js來進行處理,js處理完以後才能顯示在頁面上,所以這才導致了controller中的ModelAndView物件不能直接返回檢視
解決方法:
將頁面跳轉的控制放到前端頁面的js中來進行跳轉,即location.href = 'xxxxxxx'
前端jsp頁面的程式碼
function userresigter() { var phonenumber = document.getElementById("phonenumber").value.trim(); var password = document.getElementById("password").value.trim(); var username = document.getElementById("username").value.trim(); var password_again = document.getElementById("password_again").value.trim(); var yanzhengma = document.getElementById("yanzhengma").value.trim(); if(username == "" || password == "" || password_again == "" || phonenumber == ""){ sweetAlert("請將資訊填寫完整"); }else if(password != password_again){ sweetAlert("兩次輸入的密碼不同"); }else if(yanzhengma == ""){ sweetAlert("請輸入您的簡訊驗證碼!"); }else if(isonclick == false){ sweetAlert("請先請求手機驗證碼!"); }else{ var params = {}; params.phonenumber = phonenumber; params.password = password; params.username = username; params.yanzhengma = yanzhengma; <!--async 設定為 false,則所有的請求均為同步請求,在沒有返回值之前,同步請求將鎖住瀏覽器,使用者其它操作必須等待請求完成才可以執行 --> $.ajax({ async:false, url:"userresigter", type:"post", data: params, datatype: 'json', success: function (data) { if(data.code == "0"){ window.location.href = "login"; sweetAlert("註冊成功!"); }else if(data.code == "2"){ sweetAlert("該手機號碼已經被註冊"); }else{ sweetAlert("手機驗證碼錯誤"); } } }); } }
Controller程式碼
//註冊控制 @ResponseBody @RequestMapping(value = "userresigter",method = RequestMethod.POST) public Map<String,Object> userresigter(String phonenumber,String password,String username,String yanzhengma, HttpServletRequest request,HttpServletResponse response) throws Exception { Map<String,Object> map = new HashMap<String,Object>(); System.out.println("前端傳來的驗證碼是"+yanzhengma); System.out.println("前端傳來的手機號碼是"+phonenumber); System.out.println("前端傳來的使用者名稱是"+username); System.out.println("前段傳來的密碼是"+password); Date date = new Date(); Timestamp createtime = new Timestamp(date.getTime()); User user = usi.queryUserbyphonenumber(phonenumber); if(request.getSession().getAttribute("phonevcode").equals(yanzhengma)){ if(user == null){ //確認新增使用者 User user1 = new User(username,password,phonenumber,createtime); usi.adduser(user1); request.getSession().setAttribute("userphone",phonenumber); request.getSession().setAttribute("password",password); map.put("code","0"); }else{ //該手機號碼已經被註冊 狀態碼2 map.put("code","2"); } }else{ //手機驗證碼不正確 狀態碼1 map.put("code","1"); } return map; }
controller中經過校驗後,返回我自己定義的狀態碼給前端,再通過前端js中的程式碼進行頁面跳轉