前后端数据交互-json 你还不会传集合吗?

清疚 2023-02-23 05:18 2阅读 0赞

### 文章目录 ###

*  json
 *  前端
 *   *  jsp
 *  后端
 *   *  配置导入
     *  bean
     *  controller
 *  测试结果
 *   *  后端控制台
     *  前端控制台

# json #

--------------------

json(JavaScript Object Notation) 是一种数据格式，就是将key和value按规范封装成一串字符串，便于传输等。

<table> 
 <thead> 
  <tr> 
   <th>符号</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>[]</td> 
   <td>中括号表示数组</td> 
  </tr> 
  <tr> 
   <td>“”</td> 
   <td>双引号内是属性或值</td> 
  </tr> 
  <tr> 
   <td>:</td> 
   <td>冒号表示后者是前者的值(这个值可以是字符串、数字、数组或对象)</td> 
  </tr> 
 </tbody> 
</table>

如\{“name”: “Jack”\}表示一个包含name为Jack的对象；  
\[\{“name”: “Jack”\},\{“name”: “Rose”\}\]表示包含两个对象的数组。

前端封装json时注意转义符的使用；后端可以使用阿里巴巴fastjson.JSONArray解析json转换成类，十分方便，需要导入import com.alibaba.fastjson.JSONArray;

# 前端 #

--------------------

## jsp ##

（表格测试数据随机生成）

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <%  pageContext.setAttribute("APP_PATH",request.getContextPath());%>
        <script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.4.1.min.js"></script>
        <title>测试</title>
    </head>
    <body>
    <table id="pasg_table">
        <tr>
            <td>李华</td>
            <td>12045320010523957X</td>
            <td>19254301879</td>
        </tr>
        <tr>
            <td>缪青青</td>
            <td>741258199705214861</td>
            <td>14785210369</td>
        </tr>
        <tr>
            <td>何名</td>
            <td>784512198805214789</td>
            <td>13528475236</td>
        </tr>
    </table>
    <button id="test_button">测试</button>
    <script type="text/javascript">
        $("#test_button").click(function () { 
            var pasJson=TableToJson("pasg_table");
            $.ajax({   //动态请求数据（测试前端传后端）
                url:"${APP_PATH}/passenger/test",
                data:{ passenger:pasJson,test:"测试前端交互"},
                type:"POST",
                datatype:"json",
                scriptCharset: 'utf-8',
                success:function (result) { 
                    //请求成功（测试后端传前端）
                    console.log(result.extend.test);
                    $.each(result.extend.passengers,function(index,it){ 
                        console.log(it);
                    });
                }
            });
        });
        function TableToJson(tableId) {    //将table里数据封装成json
            var rows = document.getElementById(tableId).rows.length; //获得行数(包括thead)
            var columns = document.getElementById(tableId).rows[0].cells.length; //获得列数
            var keysArr = new Array("passengername", "passengerid","passengertel");
            var json = "[";
            var tdValue,tdName;
            for (var i = 0; i < rows; i++) {  //每行
                json += "{";
                for (var j = 0; j < columns; j++) { 
                    tdName = keysArr[j]; //Json数据的键
                    json += "\""; //加上一个双引号
                    json += tdName;
                    json += "\"";
                    json += ":";
                    tdValue = document.getElementById(tableId).rows[i].cells[j].innerHTML;//Json数据的值
                    json += "\"";
                    json += tdValue;
                    json += "\"";
                    json += ",";
                }
                json = json.substring(0, json.length - 1);
                json += "}";
                json += ",";
            }
            json = json.substring(0, json.length - 1);
            json += "]";
            return json;
        }
    </script>
    </body>
    </html>

# 后端 #

--------------------

## 配置导入 ##

在pom.xml配置依赖，不懂maven可以[点这里。][Link 1]

<dependency>
    	<groupId>com.fasterxml.jackson.core</groupId>
    	<artifactId>jackson-databind</artifactId>
    	<version>2.8.8</version>
    	</dependency>
    
        <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>
        </dependency>
        <dependency>
          <groupId>com.alibaba</groupId>
          <artifactId>fastjson</artifactId>
          <version>1.2.70</version>
        </dependency>

## bean ##

passenger值类

package cn.jmu.bean;
    
    public class Passenger { 
        private String passengerid;
    
        private String passengername;
    
        private String passengertel;
    
        @Override
        public String toString() { 
            return "Passenger{" +
                    "passengerid='" + passengerid + '\'' +
                    ", passengername='" + passengername + '\'' +
                    ", passengertel='" + passengertel + '\'' +
                    '}';
        }
        public String getPassengerid() { 
            return passengerid;
        }
        public void setPassengerid(String passengerid) { 
            this.passengerid = passengerid == null ? null : passengerid.trim();
        }
        public String getPassengername() { 
            return passengername;
        }
        public void setPassengername(String passengername) { 
            this.passengername = passengername == null ? null : passengername.trim();
        }
        public String getPassengertel() { 
            return passengertel;
        }
        public void setPassengertel(String passengertel) { 
            this.passengertel = passengertel == null ? null : passengertel.trim();
        }
    }

Msg类  
封装返回

package cn.jmu.bean;
    
    import java.util.HashMap;
    import java.util.Map;
    
    /** * 同样的返回类 */
    public class Msg { 
    	//状态码 100-成功 200-失败
    	private int code;
    	//提示信息
    	private String msg;
    	//用户返回给浏览器的数据
        private Map<String,Object> extend = new HashMap<String, Object>();
    
        public static Msg success(){ 
            Msg result = new Msg();
            result.setCode(100);;
            result.setMsg("处理成功！");
            return result;
        }
        public static Msg fail(){ 
            Msg result = new Msg();
            result.setCode(200);;
            result.setMsg("处理失败！");
            return result;
        }
        public Msg add(String key,Object value){ 
            this.getExtend().put(key,value);
            return this;
        }
        public int getCode() { 
            return code;
        }
        public void setCode(int code) { 
            this.code = code;
        }
        public String getMsg() { 
            return msg;
        }
        public void setMsg(String msg) { 
            this.msg = msg;
        }
        public Map<String, Object> getExtend() { 
            return extend;
        }
        public void setExtend(Map<String, Object> extend) { 
            this.extend = extend;
        }
    }

## controller ##

控制器层

package cn.jmu.controller;
    
    import cn.jmu.bean.Msg;
    import cn.jmu.bean.Passenger;
    import com.alibaba.fastjson.JSONArray;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import java.util.List;
    
    @Controller
    @RequestMapping("/passenger")
    public class TestController { 
        @RequestMapping("/test")
        @ResponseBody
        public Msg confirmOrder(@RequestParam(value="passenger") String passenger, @RequestParam(value="test")String test) { 
            List<Passenger> passengers = JSONArray.parseArray(passenger, Passenger.class);
            System.out.println(test);
            for (Passenger item:passengers) { 
                System.out.println(item);
            }
            //调用相关Service方法
            return Msg.success().add("passengers",passengers).add("test","测试后端交互");
        }
    }

# 测试结果 #

--------------------

## 后端控制台 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70]

## 前端控制台 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70 1]

> **原创不易，请勿转载**（本不富裕的访问量雪上加霜 ）  
> 博主首页：[https://blog.csdn.net/qq\_45034708][https_blog.csdn.net_qq_45034708]  
> *如果文章对你有帮助，记得关注点赞收藏❤*

[Link 1]: https://blog.csdn.net/qq_45034708/article/details/106172089
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200707120423182.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200707120501290.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM0NzA4,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_qq_45034708]: https://blog.csdn.net/qq_45034708