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

標籤：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對接注意事項