SpringMVC学习笔记:Ajax与Controller的参数交互

11 篇文章 0 订阅

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 将自动替换 ? 为正确的函数名,以执行回调函数。

参考博客:http://fyq891014.blog.163.com/blog/static/20074019120123305029795/

Controller中接受参数

  1. 普通方式传递参数
@RequestMapping(value = "buAuth/save")
@ResponseBody
public String save(Integer id){
    System.out.println(id);
    return "SUCCESS";
}

  采用这种方式接受参数,其底层实现原理类似于request. getParameter()获得参数,注意:如果地址栏/buAuth/save上面没有传递参数,当id为Integer的时候值为null,那么当id为int型的时候会报错.
  当采用地址栏为/buAuth/save?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框架自动把对应的值注入到与之对应的参数中。采用Ajax的方式举例如下:

$.ajax({
    type: "POST",
    url: "$!{_index}/buAuth/save",
    data: {buAuth:JSON.stringify(dataObj),menuIds:menu_ids},
    dataType: "json",
    success: function(data){ }
});
或
$.post("$!{_index}/buAuth/save",{buAuth:JSON.stringify(dataObj),menuIds:menu_ids},function(result){});
@RequestMapping(value = "buAuth/save")
@ResponseBody
public String save(String buAuth,String menuIds){
try {
    //需要调用函数把字符串转化为对应的Bean
        BuAuth buAuthBean = JSON.parseObject(buAuth, BuAuth.class);
        System.out.println(menuIds);
    }catch (Exception e){
        System.out.println(e.getMessage());
    }
    return "SUCCESS";
}

注:(1)可以采用这种方式传递多个对象,把每个对象在前端转换为JSON字符串映射到Controller对应的方法参数上,然后在函数体里分别进行解析获得到不同的对象,从而达到传递多个对象的效果。
  (2)当Controller的方法参数为实体类时,采用这种方式同样能够自动注入到参数的实体类中,此时的注入过程类似于struts2中的Model,举例如下:

$.ajax({
    type: "POST",
    url: "$!{_index}/buAuth/save2",
    data: dataObj,//dataObj必须为js对象,例如:{menuType:"POP",busiScope:"12,11,89"}
    dataType: "json",
    success: function(data){}
});
@RequestMapping(value = "buAuth/save2")
@ResponseBody
public String save2(BuAuth buAuth){
    return "SUCCESS";
}
  1. @RequestBody注释进行参数传递
@RequestMapping(value = "buAuth/save1")
@ResponseBody
public String save1(@RequestBody BuAuth buAuth){
    return "SUCCESS";
}

  采用@RequestBody标注的参数,SpringMVC框架底层能够自动完成JSON字符串转对应的Bean并注入到方法参数中,主要是通过使用HandlerAdapter 配置的HttpMessageConverters来解析post data body,然后绑定到相应的bean上的。此时Ajax发送的data值必须为Json字符串,如果Controller中需要映射到自定义Bean对象上上,则必须设置Ajax的contentType为application/json(或application/xml)。这种方式完整举例如下:

$.ajax({
    type: "POST",
    url: "$!{_index}/buAuth/save1",
    data:JSON.stringify(dataObj) ,//传递参数必须是Json字符串
    contentType: "application/json; charset=utf-8",//必须声明contentType为application/json,否则后台使用@RequestBody标注的话无法解析参数
    dataType: "json",
    success: function (response, info) {}
});
@RequestMapping(value = "buAuth/save1")
@ResponseBody
public String save1(@RequestBody BuAuth buAuth){
    return "SUCCESS";
}

注:(1)此时前端直接用$.post()直接请求会有问题,ContentType默认是application/x-www-form-urlencoded。需要使用$.ajaxSetup()标示下ContentType为application/json(或application/xml)。

$.ajaxSetup({ContentType:" application/json"});
$.post("$!{_index}/buAuth/save",{buAuth:JSON.stringify(dataObj),menuIds:menu_ids},function(result){});

(2)可以使用@ResponseBody传递数组,如下举例(做为整理直接引用其他博客例子)

var saveDataAry=[];
var data1={"userName":"test","address":"gz"};
var data2={"userName":"ququ","address":"gr"};
saveDataAry.push(data1);
saveDataAry.push(data2);
$.ajax({
    type:"POST",
    url:"user/saveUser",
    dataType:"json",
    contentType:"application/json",
    data:JSON.stringify(saveData),
    success:function(data){ }
});
@RequestMapping(value = "saveUser", method = {RequestMethod.POST }}) 
@ResponseBody  
public void saveUser(@RequestBody List<User> users) { 
    userService.batchSave(users); 
}

(3)Controller中的同一个方法只能使用@ResponseBody标记一个参数。也即是说无法直接通过该方法同时传递多个对象,不过可以间接通过设置一个中间pojo对象(设置不同的属性)来达到传递多个对象的效果。举例如下:

var buAuthPage = {
    buAuth :   data,
    menuInfo : {code:"100"}
};
$.ajax({
    type: "POST",
    url: "$!{_index}/buAuth/save5",
    data: JSON.stringify(buAuthPage),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data){
    }
});
public class BuAuthPage {
    BuAuth buAuth;
    MenuInfo menuInfo;

    public BuAuth getBuAuth() {
        return buAuth;
    }
    public void setBuAuth(BuAuth buAuth) {
        this.buAuth = buAuth;
    }
    public MenuInfo getMenuInfo() {
        return menuInfo;
    }
    public void setMenuInfo(MenuInfo menuInfo) {
        this.menuInfo = menuInfo;
    }
}
@RequestMapping(value = "buAuth/save5")
@ResponseBody
public String save5(@RequestBody BuAuthPage buAuthPage){
    return "SUCCESS";
}

参考博文:http://blog.csdn.net/kobejayandy/article/details/12690555
http://www.cnblogs.com/quanyongan/archive/2013/04/16/3024741.html

  • 4
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值