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;
    }