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