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
你的點贊將會是我最大的動力