文章目录
- 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.4</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","测试后端交互");
}
}
测试结果
后端控制台
前端控制台
原创不易，请支持正版。
博主地址：https://blog.csdn.net/qq_45034708
你的点赞将会是我最大的动力
