Ajax與Controller的參數交互

理論

jQuery.ajax( options )中重要參數設置

jQuery.ajax( options ) : 通過 HTTP 請求加載遠程數據。通過jquery.ajax與SpringMVC的Controller交互時候，需要關注以下幾個參數(一個典型的ajax請求代碼如下)：

$.ajax({
      type: "POST",
      url: "$!{_index}/buAuth/save4",
      data:JSON.stringify(dataObj) ,
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function (response, ifo) {}
});

 

• contentType
  參數類型：String
  說明：(默認: “application/x-www-form-urlencoded”) 發送信息至服務器時內容編碼類型。默認值適合大多數應用場合。告訴服務器從瀏覽器提交過來的數據格式。
  　　例如：我們提交數據時假如使用了 JSON2.js 中方法 JSON.stringify(obj) 格式化為json字符串后，再默認提交就會報錯。這個時候就需要指定提交的內容格式為：”application/json”。
• data
  參數類型：Object,String
  說明：發送到服務器的數據。若data數據類型為JavaScript對象或數組，Jquery在提交之前自動調用JQuery.param()方法把要發送的數據編碼成為”application/x-www-form- urlencoded”格式的數據（即 name=value&name1=value1），此時參數為Object並且必須為 Key/Value 格式；如果為數組，jQuery 將自動為不同值對應同一個名稱。如 {foo:[“bar1”, “bar2”]} 轉換為 ‘&foo=bar1&foo=bar2’；
  　　若data數據類型為String類型，則直接默認該數據已經按照”application/x-www-form-urlencoded”格式編碼完成，不再轉換。
• dataType
  參數類型：String
  說明：預期服務器返回的數據類型。設定HttpHeader中“Accept”域的內容，告訴服務器瀏覽器可以想要返回的數據格式類型，同時JQuery也會根據該類型對返回的數據進行處理。如果不指定，jQuery 將自動根據 HTTP 包 MIME 信息返回 responseXML 或 responseText，並作為回調函數參數傳遞，可用值:
  “xml”: 返回 XML 文檔，可用 jQuery 處理。
  “html”: 返回純文本 HTML 信息；包含 script 元素。
  “script”: 返回純文本 JavaScript 代碼。不會自動緩存結果。
  “json”: 返回 JSON 數據 。JQuery將返回的字符串格式數據自動轉化為Javascript對象，便於直接使用obj.property格式訪問。若沒有指定該選項，即使返回的是JSON格式的字符串，JQuery也不會自動轉換。
  “jsonp”: JSONP 格式。使用 JSONP 形式調用函數時，如 “myurl?callback=?” jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。

 

1、spring mvc接收數據

 

1.1、接收Long等基本類型的數據

 

jsp頁面

/**
 * Created by Administrator on 2017/7/29.
 */
var params = {};
//params.XX必須與Spring Mvc controller中的參數名稱一致
// 否則在controller中使用@RequestParam綁定
params.num = num;
params.id = id;
params.amount = amount;
$.ajax({
    async: false, 
　　 type: "POST", 
　　 url: "price/update",//注意路徑
    data: params, 
　　 dataType: "json", 
　　 success: function (data) {
        if (data.result == 'SUCCESS') {
            alert("修改成功");
        } else {
            alert("修改失敗，失敗原因【" + data + "】");
        }
    }, error: function (data) {
        alert(data.result);
    }
});

 

controller接收數據

    @RequestMapping("update")
    @ResponseBody   //此注解不能省略 否則ajax無法接受返回值
    public Map<String, Object> update(Long num, Long id, BigDecimal amount) {
        Map<String, Object> resultMap = new HashMap<String, Object>();
        if (num == null || id == null || amount == null) {
            resultMap.put("result", "參數不合法！");
            return resultMap;
        } //xxx邏輯處理
        resultMap.put("result", "result");
        return resultMap;
    }

 采用這種方式接受參數，其底層實現原理類似於request. getParameter()獲得參數，注意：如果地址欄/price/update上面沒有傳遞參數,當id為Long的時候值為null,那么當id為long型的時候會報錯.
 當采用地址欄為/price/update?id=10的訪問方式時候，參數附加在Url的后面，此時Controller中有三種接收方式
　　1.String save (@RequestParam(value=”userid”)Integer id),這樣會把地址欄參數名為userid的值賦給參數id,如果用地址欄上的參數名為id,則接收不到
　　2. String save (@RequestParam Integer id),這種情況下默認會把id作為參數名來進行接收賦值
　　3.String save (Integer id),這種情況下也會默認把id作為參數名來進行接收賦值
注:如果參數前面加上@RequestParam注解,如果地址欄上面沒有加上該注解的參數,例如:id,那么會報404錯誤,找不到該路徑。
　　當采用Ajax請求方式時候，需設置兩兩處:

（1）設置contentType的參數值為：application/x-www-form-urlencoded（該值即為默認值，也可以不設置）；

（2）請求參數data必須為js對象。此時由上文Ajax參數說明可知jQuery自動調用JQuery.param()方法把要發送的數據組織成類似於application/x-www-form-urlencoded（即name=value&name1=value1），然后在Controller中SpringMVC框架自動把對應的值注入到與之對應的參數中。

（3）可以采用這種方式傳遞多個對象，把每個對象在前端轉換為JSON字符串映射到Controller對應的方法參數上，然后在函數體里分別進行解析獲得到不同的對象，從而達到傳遞多個對象的效果。
（4）當Controller的方法參數為實體類時，采用這種方式同樣能夠自動注入到參數的實體類中

1.2、controller中參數是實體bean，bean中屬性都是基本數據類型

ajax

var params = {};
params.num = $("#num").val();
params.id = $("#id").val();//注意params.名稱  名稱與實體bean中名稱一致 
$.ajax({
    type: "POST",
    url: "price/add",
    data: params,
    dataType: "json",
//  contentType: "application/json; charset=utf-8",//此處不能設置，否則后台無法接值  
    success: function (data) {
        if (data.msg != "") {
            alert(data.msg);
        }
    }, error: function (data) {
        alert("出現異常，異常原因【" + data + "】!");
    }
});

 

實體bean

 public class DataVo {
        private Long num;
        private String id;

        public Long getNum() {
            return num;
        }

        public void setNum(Long num) {
            this.num = num;
        }

        public String getId() {
            return id;
        }

        public void setId(String id) {
            this.id = id;
        }
    }

 

controller

 @RequestMapping("add")
    @ResponseBody //此處不能省略 否則ajax無法解析返回值
    public Map<String, Object> add(DataVo dataVo) {
        Map<String, Object> result = null;
        if (dataVo.getNum() == null || StringUtils.isBlank(dataVo.geId())) {
            result = new HashMap<String, Object>();
            result.put("msg", "參數不合法！");
            return result;
        }
        //xxx業務邏輯處理
        return result;
    }

 

1.3、controller中參數是實體bean，bean中屬性有數組

jquery ajax 需要進行json序列化，jQuery自帶json序列化插件

JSON.stringify(）將json對象轉換為json字符串傳遞。

json對象：{"id":"1", "name": "Roger"}

json字符串：'{"id":"1", "name": "Roger"}'    

注意：json字符串必須在里面使用雙引號，外面使用單引號

使用JSON.stringify(）就可以不考慮json字符串中的 ' 和 " 問題，如果不使用這個就得注意json字符串的方式，如下：data:'{"id":"1", "name": "Roger"}'        里面需要使用雙引號

需要注意在ajax參數配置如下：
datatype:"json",
contentType: "application/json; charset=utf-8",  

var params = {};
params.nums = [];
params.id = $("#id").val();//parmas.參數名 注意與實體bean參數名稱相同
for (var i = 0; i < prices.length; i++) {
    params.nums[i] = prices[i].value;
}
$.ajax({
    type: "POST",
    url: "price/add",
    data: JSON.stringify(params),//json序列化
    datatype: "json", //此處不能省略
    contentType: "application/json; charset=utf-8",//此處不能省略
    success: function (data) {
        alert(data);
    }, error: function (data) {
        alert(data)
    }
});

 

實體bean

  public class DataVo {
        private BigDecimal[] nums;
        private String id;

        public Long getId() {
            return id;
        }

        public void setId(Long id) {
            this.id = id;
        }

        public BigDecimal[] getNums() {
            return nums;
        }

        public void setNums(BigDecimal[] nums) {
            this.nums = nums;
        }
    }

 

controller

    @RequestMapping("add")
    @ResponseBody//此處不能省略 否則ajax無法解析返回值  
    public Map<String, Object> add(@RequestBody DataVo dataVo) {//@RequestBody注解不能省略，否則無法接值  
        Map<String, Object> resultMap = new HashMap<String, Object>();
        //業務邏輯處理  
        return resultMap;
    }

 采用@RequestBody標注的參數，SpringMVC框架底層能夠自動完成JSON字符串轉對應的Bean並注入到方法參數中，主要是通過使用HandlerAdapter 配置的HttpMessageConverters來解析post data body，然后綁定到相應的bean上的。此時Ajax發送的data值必須為Json字符串，如果Controller中需要映射到自定義Bean對象上上，則必須設置Ajax的contentType為application/json（或application/xml）。

 

2、Ajax接收SpringMVC的回傳值

ajax

var standard = {"id":1, "entities":"entities", "possibleEntities":"possibleEntities"};
$.ajax({
    url: "${ctx}/StdManage/testJson",
    type: "POST",
    dataType: "json",
    contentType: "application/json",
    data: JSON.stringify(standard),
    success:function(data){
        // 接收List
        alert(data[0]);
        // 接收Map
        // alert(data.success);
    }
});

controller

@RequestMapping("/testJson")
    @ResponseBody
    public List<String> testJson(@RequestBody StandardWithBLOBs standardWithBLOBs) {
        System.out.println("testJson");
        System.out.println(standardWithBLOBs.getId());
//        Map<String, Object> map = new HashMap<>();
//        map.put("success", true);
//        return map;

        List<String> list = new ArrayList<>();
        list.add("hello");
        list.add("word");

        return list;
    }