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

唔仄lo咚锵

发布于 2020-09-15 14:38:51

1.3K0

发布于 2020-09-15 14:38:51

文章被收录于专栏：blog(为什么会重名，真的醉了)blog(为什么会重名，真的醉了)

文章目录

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

json

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

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

如{“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可以点这里。

<!-- jackson(返回json字符串的支持) -->
	<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.8.8</version>
	</dependency>
<!--JSONArray-->
    <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","测试后端交互");
    }
}