跳至主要內容

前后端数据交换

Guitar大约 3 分钟

前后端数据交换可以基于纯文本、JSON、XML等方式，只要前后端一致即可。

数据可以在后端完成解析，并将解析完的格式字串直接发送给前端进行渲染即可；也可以后端封装数据，再发送给前端进行拆封、解析。

基于XML的数据交换

XML格式的数据交换比较少用，解析和封装都较为复杂。

? XML使用标签对（结点node）完成对数据的封装，整个XML数据被解析成结点树。

  1. 原标签（无子标签）的格式如下：<nodeName>textContent</nodeName>；
  2. 有子标签的情况下，可以通过.childNodes属性获得所有子节点组成的数组。
  3. document对象使用.getElementsByTagName("nodename")方法可以获得文档中所有<nodename>...<nodename>结点，以有序列表返回，可以通过下标、forEach()等方式访问。

前端XML的解析与渲染

前端获取XML格式响应与渲染：

// 使用 .responseXML 属性获得相应内容的文档树（document对象）
var xmlDoc = this.responseXML
// 使用 .getElementsByTagName(...) 方法获得结点数组（封装了数据的结点数组）
var students = xmlDoc.getElementsByTagName("student")

var html = "" // 拼接字串
for (var i = 0; i < students.length; i++) {
	var student = students[i] // 遍历结点
	var nameOrAge = student.childNodes // 获取子结点（封装属性）
    ...
    // 一个对象渲染成一行
    html += "<tr>"
    // 遍历属性
	for (var j = 0; j < nameOrAge.length; j++) {
		var node = nameOrAge[j]
        // .nodeName 属性获得属性名
		if (node.nodeName == "name") { // 判断属性名
            // .textContent 属性获得属性值
			html += "<td>"+node.textContent+"</td>" // 拼接属性值
		}
        // 即<nodename>textContent</nodename>
		if (node.nodeName == "age") { // 判断属性名
			html += "<td>"+node.textContent+"</td>"
		}
	}
    html += "</tr>"
	...
}
// 仍然通过 .innerHTML 属性进行渲染
document.getElementById("stutbody").innerHTML = html

后端XML的封装与响应

使用XML，后端需要设置响应内容为xml，不然前端不能通过.responseXML属性获得相应内容（属性值为null）。

response.setContentType("text/xml;charset=UTF-8");

通过字符串拼接的方式完成xml格式的封装。

基于JSON的数据交换

JSON基本的字串格式

  1. 空（null）：null

  2. 布尔值（Boolean）：true / false

  3. 数字（Number）：整数或浮点数，例如：42，3.14

  4. 字串（String）：双引号中的任意字符序列。

例如："Hello, world!"，"1234"

  1. 数组（Array）：用中括号包含的数值序列。

例如：[1, 2, 3]，["apple", "banana", "cherry"]

  1. 对象（Object）：用花括号包含的键值对列表。例如：

WEB前端JSON字串解析

通过js，将一个json格式的字符串转换成json对象：

// 直接赋值JSON字串（两侧无引号，不然就是普通字串）
var jsonObj = {"username" : "zhangsan", "password" : "1233344"}
// 获取对象的属性
var user = {
    "usercode" : 111,
    "username" : "zhangsan",
    "sex" : true,
    "age" : 20,
    "aihaos" : ["抽烟", "喝酒", "烫头"],
    "addr" : { // 属性对象
        "city" : "北京",
        "street" : "北京大兴区",
        "zipcode" : "123456"
    }
}
// 使用 . 调用
console.log(user.addr.street)
// 使用 [] 调用
console.log(user["sex"] ? "男的" : "女的")

// 调用JSON类的静态方法
var jsonObj = JSON.parse(jsonStr) // 参数为JSON格式字串

后端JSON字串的转换

极度痛苦的手工拼接：

json.append("[");
while (rs.next()) {
    // 获取每个学生的信息
    String name = rs.getString("name");
    String age = rs.getString("age");
    String addr = rs.getString("addr");
    // 拼接json格式的字符串
    // {"name":"   王五    ","age":    20      ,"addr":"      北京大兴区     "},
    json.append("{\"name\":\"");
    json.append(name);
    json.append("\",\"age\":");
    json.append(age);
    json.append(",\"addr\":\"");
    json.append(addr);
    json.append("\"},");
}
jsonStr = json.substring(0, json.length() - 1) + "]";

使用fastjson进行转换：

fastjson是阿里巴巴贡献给Apache基金会的开源jar包，是”最快的“json转换工具。支持对象、数组、集合的json格式转换。使用fastjson需要引入对于的jar包，如astjson-1.2.2.jar。

// 使用JSON类（工具类，构造方法私有化）的静态方法转换
JSON.toJSONString(...);

List<Student> studentList = new ArrayList<>();
while (rs.next()) {
    // 取出数据
    String name = rs.getString("name");
    int age = rs.getInt("age");
    String addr = rs.getString("addr");
    // 将以上数据封装成Student对象
    Student s = new Student(name, age, addr);
    // 将Student对象放到List集合
    studentList.add(s);
}
// 将List集合转换成json字符串
jsonStr = JSON.toJSONString(studentList);
Copyright ©2024-present Guitar