jquery的ajax與spring mvc對接注意事項

來源:互聯網
上載者:User

標籤:void   error:   public   color   ***   角色   無法   his   欄位   

昨天一直糾結這麼一個問題,應用情境是這樣的:

這裡登陸是通過jquery的ajax傳輸資料到後台controller類相應的映射mapping接收。本來是想,在後台驗證成功之後返回一個視圖modelAndView。但是卻不曾想到有這麼一個問題,就是不管你怎麼返回,前台就是不跳轉頁面。這裡牽扯到一個很重要的問題。先來看看我前端ajax發送登陸請求的代碼:

<script type="text/javascript">        $(function() {            $(‘#submitLogin‘).click(function() {                $.ajax({                    type:"POST",                    url:"/user/checkLogin",                    dataType: "json",                    data: $("#loginform").serialize(),                    success:function(data,status){                        alert("成功"+data);                    },                    error:function () {                        alert("失敗");                    }                });            });        });    </script>

再來看一個不推薦的後台樣本:(錯誤的原因)

@RequestMapping(value = "/checkLogin",method = RequestMethod.POST)    public @ResponseBody  ModelAndView userLogin(TUserLoginVo tUserLoginVo, HttpServletRequest request,HttpServletResponse response){        HttpSession session=request.getSession();        String code= (String) session.getAttribute("code");        System.out.println("---"+session.getAttribute("code"));        ModelAndView mv=new ModelAndView();        if(code.equals(tUserLoginVo.getCheckcode())){            TUser tUser=staffService.finUser(tUserLoginVo.getUsername(),tUserLoginVo.getPassword());            if(tUser!=null){                mv.setViewName("redirect:/pages/test.html");                System.out.println("---"+tUser.getUsername());                return mv;            }        }        mv.setViewName("redirect:/pages/LoginPage.html");        return mv;    }

上面直接返回一個視圖,但是前台就是沒看到跳轉,而且直接執行了error的方法,問題是明明後台代碼已經執行了啊。

下面先來解釋一下jquery ajax代碼裡面都扮演了什麼角色!

type:"POST",表示通過post請求。
url:"/user/checkLogin",表示請求映射在controller裡面的方法前的地址(例如: @RequestMapping(value = "/checkLogin",method = RequestMethod.POST))
dataType: "json",這個很重要,這是直接表面我期望的後台給我返回一個json類型的資料,如果不是,則會直接執行error的方法。
下面在分析一個通常不設定的屬性:
contentType:"application/json",這是表明我們前台傳過去的是json類型的資料,因此需要將我們的資料提前通過 JSON.stringify(a);將資料a變成json類型,當然並不是什麼都能變成json類型的,希望記住!
接下來
data: $("#loginform").serialize(),這是一個非常快捷的方法,可以將表單中的值直接取出來,拿上面的例子,產生的格式是這樣的:

通過這種方式,後台也可以直接用對象來接收,至於它內部怎麼組裝成對象的,與表單中的name屬性有關,一定要切記,表單中,沒有後台需要的資料的標籤中千萬別嵌套name屬性。同時name屬性的值一定要對應我們PO對象中的欄位值!
例如我的一個PO類:
    private String username;    private String password;    private String checkcode;

那些getter和setter方法我就不擺出來了

它必須對應html表單中:

如果發生不一致,後台接收就會報不支援的錯誤!

為了迎合 dataType: "json",這一要求,後台一定要在方法傳回值前面加上 @ResponseBody  :

public @ResponseBody  Object userLogin(){*****}

以上是一個注意點,現在來另外一個!

也是之前提到的,json資料類型,後台返回的json資料類型,雖然我們加了@ResponseBody,但這個千萬記住,這個是可以將對象、集合等類型轉換為json類型,但是有時候我們需要返回一個字串怎麼辦,那對不起,@ResponseBody無法協助我們轉換成json類型,而且也不會報錯,只是前台會只執行error的方法,因為我們設定了dataType: "json"

通常情況下,是這樣設定成json的,所以我們要返回一個字串最好是另闢蹊徑(當然dataType: "json"裡面的json也可以改成text等,但是沒這個必要)

我是這一解決的,直接對比代碼的傳回值吧(自己組裝的一個json格式的字串)

 

@RequestMapping(value = "/checkLogin",method = RequestMethod.POST)    public @ResponseBody  Object userLogin(TUserLoginVo tUserLoginVo, HttpServletRequest request,HttpServletResponse response){        HttpSession session=request.getSession();        String code= (String) session.getAttribute("code");        System.out.println("---"+session.getAttribute("code"));        if(code.equals(tUserLoginVo.getCheckcode())){            TUser tUser=staffService.finUser(tUserLoginVo.getUsername(),tUserLoginVo.getPassword());            if(tUser!=null){                System.out.println("---"+tUser.getUsername());                return  "{\"LoginOK\":\"LoginOK\"}";            }        }        return "{\"LoginError\":\"LoginError\"}";    }

 

問題解決了,前台執行了success的方法!

當然,上面的方法也不好,那怎麼辦,我們需要的是json,但又無法轉得了。

可以這一,給一個通用方法:

package com.liyong.bos.utils;import java.io.Serializable;import java.util.List;public class JsonResult<T, K> implements Serializable {    private boolean result;    private String msg;    private List<T> dataList;    private K data;    private T dataObje;    public K getData() {        return data;    }    public void setData(K data) {        this.data = data;    }    public List<T> getDataList() {        return dataList;    }    public void setDataList(List<T> dataList) {        this.dataList = dataList;    }    public String getMsg() {        return msg;    }    public void setMsg(String msg) {        this.msg = msg;    }    public boolean isResult() {        return result;    }    public void setResult(boolean result) {        this.result = result;    }    public T getDataObje() {        return dataObje;    }    public void setDataObje(T dataObje) {        this.dataObje = dataObje;    }}

把我們需要的資料封裝到jsonResult對象中即可,然後傳回值是JsonResult就行。具體功能請看代碼。

 

jquery的ajax與spring mvc對接注意事項

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。