ajax+springmvc数据交互

springMVC和ajax配合用来数据交互,由于存在多种数据类型,所以在此记录下不同情况的前端封装以及后端接受demo.
使用注解@ResponseBody可以将结果(一个包含字符串和JavaBean的Map),转换成JSON。  
使用 @RequestBody 注解前台只需要向 Controller 提交一段符合格式的 JSON,Spring 会自动将其拼装成 bean  
Spring这个转换是靠org.codehaus.jackson这个组件来实现的,所有需要引入jackson-core-asl和org.codehaus.jackson两个jar包  

通过ajax传递参数给springmvc,经常会因为 参数类型太复杂,或者根本不知道springmvc都支持哪些类型转换,导致后台接收出现各种问题。如果书写格式没有问题仍然接受参数报错,大部分是因为springmvc默认无法支持该种格式的json转换导致的
现在一句话解决,就是用@RequestBody注解接收
下面看一些传参的例子,基本涵盖了大部分的参数传递类型

案例1:简单数组 idList[]

ajax

            $("#test1").on("click",function(){
                var idList = new Array();
                idList.push("1");
                idList.push("2");
                idList.push("3");
                $.post("/mvc/client1/test1",{ idList:idList})
            });


java

    /**
     * 简单类型list
     * explain:包含string int date 等属性
     */
    @RequestMapping("/test1")
    @ResponseBody
    public void test1(@RequestParam("idList []") List<Integer> idList){
        for(Integer i: idList){
            System.out.println(i);
        }
    }

案例1中要注意,当你ajax传递一个很简单的数组,本以为后台能够接受到,却总是报错,很可能的原因是:http请求传递数组的时候,为了区别是一个数组,会在数组名称后面 加上中括号“[]”,所以后台接受的时候用@RequestParam告诉方法,你要的idList实际上是idList[]就可以了


案例:2:简单对象User (包含id,username)

ajax


            $("#test2").on("click",function(){
                var id          =1;
                var username    ="fangxin";
                $.post("/mvc/client1/test2",{id:id,username:username,birthday:new Date()})
            });


java

    @RequestMapping("/test2")
    @ResponseBody
    public void test2(User user){
        System.out.println(user.getId());
        System.out.println(user.getUsername());
        System.out.println(user.getBirthday());
    }

这就是最常见的传递参数,如果一个对象的属性都是简单类型,那基本没什么问题

案例3:复杂对象User (包含id,username,String[],List<Person>)

ajax


            $("#test3").on("click",function(){
                var user = {
                    id:1,
                    username:"fangxin",
                    birthday:new Date(),
                    luckyNums:[1,2,3],
                    friends:[
                        {name:"zhangsan"},
                        {name:"lisi"}
                    ]
                };
                $.ajax({
                    type: "POST",
                    url:"/mvc/client1/test3",
                    data: JSON.stringify(user),
                    contentType:"application/json"
                })
            });


java

     /**
     * 复杂对象
     * explain:包含简单list属性、对象list属性
     */
    @RequestMapping("/test3")
    @ResponseBody
    public void test3( @RequestBody User user){
        System.out.println(user.getId());
        System.out.println(user.getUsername());
        System.out.println(user.getBirthday());
        for(Integer i:user.getLuckyNums()){
            System.out.println(i);
        }
        for(Person p:user.getFriends()){
            System.out.println(p.getName());
        }
    }

案例3中的User的属性相当复杂,有简单数组,还有包含对象的复杂List,这样的user如果用案例2的方式接受,肯定就挂了。此时,最好是前台stringify转换成json字符串,后台用@RequestBody接受自动转换成想要的数据格式。

案例4:复杂List<User>

ajax

            $("#test5").on("click",function(){
                var users = [];
                for(var i=0;i<10;i++){
                    var user = {
                        id:1,
                        username:"fangxin",
                        birthday:new Date(),
                        luckyNums:[1,2,3],
                        friends:[
                            {name:"zhangsan"},
                            {name:"lisi"}
                        ]
                    };
                    users.push(user);
                }
                $.ajax({
                    type: "POST",
                    url:"/mvc/client1/test5/",
                    data: JSON.stringify(users),
                    contentType:"application/json"

                })
            });

java

    /**
     * 复杂List
     */
    @RequestMapping("/test5")
    @ResponseBody
    public void test5( @RequestBody List<User> users){
        for(User user:users){
            System.out.println(user.getUsername());
        }
    }


  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值