美文网首页
前台页面传复杂对象到后台

前台页面传复杂对象到后台

作者: 宇子豪 | 来源:发表于2018-11-23 14:07 被阅读0次

    昨天被问了一个问题,页面怎么怎么传递一个复杂对象到后台,如怎么传递一个集合到后台,我顿时懵了一下,好像平时真的没有传过什么复杂对象
    这里特意来记录一下将集合传递到后台

    将复杂对象转为json格式的字符串传到后台,后台再来接收这串字符串。
    (注:我这里的测试用的框架是Spring Boot)

    前台代码

    var obj = {};//定义对象
        obj['a'] = '豪豪';
        obj['b'] = '真帅';
        var obj2 = {};
        obj2['a'] = '豪豪2';
        obj2['b'] = '真帅2';
        var list = [];//定义集合
        list.push(obj);
        list.push(obj2);
        $('#btn').click(function () {
            $.ajax({
                type: "post",
                url: ctx + '/service/rsList',
                //下面一行少了就会报415请求格式的异常,作用是ajax发送的必须是字符串
                contentType: 'application/json',
                dataType: "json",
                data: JSON.stringify({sublist: list})
            });
        }); 
    

    这里我先是定义了两个对象,给了两个对象属性并且赋值然后定义了一个集合,将两个对象加了进去,后面则是使用ajax请求方法并将集合作为参数带过去

    • 将list集合转化为json格式的一串字符串,将字符串传到后台就ok了。
    • JSON.stringify()将一个JavaScript值(对象或者数组)转换为一个 JSON字符串

    后台代码

        @RequestMapping("/rsList")
        public void rsList(@RequestBody JSONObject jsonObject) {
            String sublist = jsonObject.getString("sublist");
        }
    

    运行结果


    image.png
    • @RequestBody常用来处理content-type不是默认的application/x-www-form-urlcoded编码的内容
    • 使用JSONObjcet对象根据key获取成功
    //这是网上别人的一些后台代码,将字符串转成了集合
    JSONObject json = new JSONObject(sublist);  
    String s = json.getString("sublist"); 
    JSONArray jsonArray = JSONArray.fromObject(s);
    List<String> list = (List) JSONArray.toCollection(jsonArray, String.class);
    
    
    • 注:我一开始找不到对应的方法,后面发现是包导了
    原来是包导错了,应该是这个net.sf.json.JSONObject,需添加jar包:
    <!-- JSONObject对象依赖的jar包 -->  
            <dependency>  
                <groupId>commons-beanutils</groupId>  
                <artifactId>commons-beanutils</artifactId>  
                <version>1.9.3</version>  
            </dependency>  
            <dependency>  
                <groupId>commons-collections</groupId>  
                <artifactId>commons-collections</artifactId>  
                <version>3.2.1</version>  
            </dependency>  
            <dependency>  
                <groupId>commons-lang</groupId>  
                <artifactId>commons-lang</artifactId>  
                <version>2.6</version>  
            </dependency>  
            <dependency>  
                <groupId>commons-logging</groupId>  
                <artifactId>commons-logging</artifactId>  
                <version>1.1.1</version>  
            </dependency>  
            <dependency>  
                <groupId>net.sf.ezmorph</groupId>  
                <artifactId>ezmorph</artifactId>  
                <version>1.0.6</version>  
            </dependency>  
            <dependency>  
                <groupId>net.sf.json-lib</groupId>  
                <artifactId>json-lib</artifactId>  
                <version>2.2.3</version>  
                <classifier>jdk15</classifier><!-- 指定jdk版本 -->  
            </dependency>  
            <!-- Json依赖架包下载 -->
    

    相关文章

      网友评论

          本文标题:前台页面传复杂对象到后台

          本文链接:https://www.haomeiwen.com/subject/korlqqtx.html