1. 程式人生 > >通過ajax傳送post請求向controller傳遞引數後,頁面無法跳轉問題

通過ajax傳送post請求向controller傳遞引數後,頁面無法跳轉問題

我的專案之前都是用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中的程式碼進行頁面跳轉