1. 实现一个案例： 13
用户点击按钮之后，发送AJAX请求，显示学生列表。
- 在后端java程序中拼接HTML代码，然后将HTML代码直接响应到浏览器客户端。这种方式不好，不应该在java代码中编写HTML代码，能否在java程序中直接向前端响应数据？可以，可以在后端拼接JSON格式的字符串，或者XML格式的字符串，将这个字符串发送给前端，前端解析即可。
我们以下代码并没有使用json，目的是为了引出json，后面会改进
代码在com.bjpowerndoe.ajax.servlet
AjaxRequest5Servlet
package com.bjpowerndoe.ajax.servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
//发送ajax请求，显示学生列表 13
@WebServlet("/ajaxrequest5")
public class AjaxRequest5Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 连接数据库，查询学员信息，拼接HTML代码，响应HTML代码到浏览器（这里就不再连接数据库了，写死了。）
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
// 连接数据库，拼接HTML代码（就不链接了，直接写吧）
// 目前存在的缺点：在后端的java代码中又开始拼接HTML代码了。
// 显然这是在后端java中写前端的HTML代码。不好维护。
// 能不能直接将数据返回，给WEB前端数据就行了。让WEB前端能够拿到数据就
// 行，然后页面展示的功能交给WEB前端来处理。
// 我们后端的java代码能不能只返回数据？？？？可以。（返回数据可以采用JSON
// 的格式，也可以采用XML的格式）
StringBuilder html = new StringBuilder();
html.append("");
html.append("1");
html.append("王五");
html.append("20");
html.append("北京大兴区");
html.append("");
html.append("");
html.append("2");
html.append("李四");
html.append("22");
html.append("北京海淀区");
html.append("");
out.print(html);
}
}E:\java学习\Ajax\course\course4\web
ajax6.html
<!--发送ajax请求，显示学生列表 13-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送ajax请求，显示学生列表</title>
</head>
<body>
<script type="text/javascript">
window.onload = function (){
document.getElementById("btn").onclick = function (){
//创建核心对象
var xhr = new XMLHttpRequest();
//注册回调函数
xhr.onreadystatechange = function (){
if (this.readyState==4) {
if (this.status==200) {
document.getElementById("stutbody").innerHTML = this.responseText
}else{
alert(this.status)
}
}
}
//打开通道
xhr.open("GET","/ajax/ajaxrequest5?t=" + new Date().getTime(),true)
//发送请求
xhr.send()
}
}
</script>
<input type="button" value="显示学员列表" id="btn">
<table width="50%" border="1px">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>住址</th>
</tr>
<tbody id="stutbody">
<!--<tr>
<th>1</th>
<th>张三</th>
<th>20</th>
<th>北京大兴区</th>
</tr>
<tr>
<th>2</th>
<th>李四</th>
<th>22</th>
<th>北京海淀区</th>
</tr>-->
</tbody>
</table>
</body>
</html>
2. 创建和访问json对象 14
代码在E:\java学习\Ajax\course\course4\web
jsontest.html
<!--回顾json的使用 14-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>json test</title>
</head>
<body>
<script type="text/javascript">
/*
在javascript语言中怎么创建一个json对象呢？语法是什么？
var jsonobj = {
"属性名1" : 属性值,
"属性名2" : 属性值,
"属性名3" : 属性值,
"属性名4" : 属性值,
"属性名5" : 属性值
}
注意：
属性值的数据类型，那就随意了。可能是数字，可能是布尔类型，可能是字符串，可能是数组.....
*/
/* //创建json对象
var user = {
"usercode" : 111,
"username" : "zhangsan",
"sex" : true,
"age" : 20,
"aihao" : ["抽烟","喝酒","烫头"],
"addr" : address
}
// 另一个json对象
var address = {
"city": "北京",
"street": "北京大兴区",
"zipcode": "123456"
}*/
var user = {
"usercode" : 111,
"username" : "zhangsan",
"sex" : true,
"age" : 20,
"aihao" : ["抽烟","喝酒","烫头"],
"addr" : {"city": "北京",
"street": "北京大兴区",
"zipcode": "123456"
}
}
//访问json对象的属性
//第一种方式
console.log(user.usercode)
console.log(user.username)
console.log(user.sex?"男":"女")
console.log(user.age)
for (var i = 0; i < user.aihao.length; i++) {
console.log(user.aihao[i])
}
// 访问这个用户是哪个街道的？
console.log(user.addr.street)
//第二种方式
console.log(user["usercode"])
console.log(user["username"])
console.log(user["sex"]?"男":"女")
console.log(user["age"])
</script>
</body>
</html>
3. web前端中如何将json格式的字符串转换成json对象 15
var jsonStr = "{\"username\" : \"zhangsan\", \"password\" : \"1233344\"}"
var jsonObj = JSON.parse(jsonStr)
console.log(jsonObj.username)
console.log(jsonObj.password)代码在E:\java学习\Ajax\course\course4\web
接送test.html
<!--web前端中如何将json格式的字符串转换成json对象 15-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>json test</title>
</head>
<body>
<!--从后端java程序中响应回来的是json格式的字符串，那么你怎么把json格式的字符串转换成json对象呢？-->
<script type="text/javascript">
//这是一个json对象
var user={
"username" : "zhangsan",
"password":"123456"
}
// 是json对象，才能这样访问。
alert(user.username + "," + user.password)
//从服务器端返回来的不是一个json对象，是一个json的字符串
var fromJavaServletJsonStr = "{\"username\" : 111,\"age\" : 20}"
// 有两种方式：
// 第一种方式：使用eval函数。（这个以前在javascript语言中讲过，这里就不再说了。）
window.eval（"var str="+fromJavaServletJsonStr);
//访问
alert(str.username+","+str.age)
// 第二种方式：调用javascript语言中的内置对象JSON的一个方法parse。
var jsonObj = JSON.parse(fromJavaServletJsonStr);
alert(jsonObj.username+","+jsonObj.age)
</script>
</body>
</html>
4. web前端和后端采用json格式的字符传进行数据交换 16
将案例1改进
代码在com.bjpowerndoe.ajax.servlet
AjaxRequest5Servlet
package com.bjpowerndoe.ajax.servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
//发送ajax请求，显示学生列表 13
@WebServlet("/ajaxrequest5")
public class AjaxRequest5Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 连接数据库，查询学员信息，拼接HTML代码，响应HTML代码到浏览器（这里就不再连接数据库了，写死了。）
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
// 连接数据库，拼接HTML代码（就不链接了，直接写吧）
// 目前存在的缺点：在后端的java代码中又开始拼接HTML代码了。
// 显然这是在后端java中写前端的HTML代码。不好维护。
// 能不能直接将数据返回，给WEB前端数据就行了。让WEB前端能够拿到数据就
// 行，然后页面展示的功能交给WEB前端来处理。
// 我们后端的java代码能不能只返回数据？？？？可以。（返回数据可以采用JSON
// 的格式，也可以采用XML的格式）
/*StringBuilder html = new StringBuilder();
html.append("");
html.append("1");
html.append("王五");
html.append("20");
html.append("北京大兴区");
html.append("");
html.append("");
html.append("2");
html.append("李四");
html.append("22");
html.append("北京海淀区");
html.append("");
out.print(html);*/
//将以上程序变成json格式的字符串 16
String jsonStr = "[{\"name\":\"王五\",\"age\":20,\"addr\":\"北京大兴区\"}, {\"name\":\"李四\",\"age\":22,\"addr\":\"北京海淀区\"}]";
// 响应JSON格式的字符串给前端。
out.print(jsonStr);
}
}E:\java学习\Ajax\course\course4\web
ajax6.html
<!--发送ajax请求，显示学生列表 13-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送ajax请求，显示学生列表</title>
</head>
<body>
<script type="text/javascript">
window.onload = function (){
document.getElementById("btn").onclick = function (){
//创建核心对象
var xhr = new XMLHttpRequest();
//注册回调函数
xhr.onreadystatechange = function (){
if (this.readyState==4) {
if (this.status==200) {
//document.getElementById("stutbody").innerHTML = this.responseText
//将json格式的字符串转换成json对象
var stuList = JSON.parse(this.responseText);// 是一个数组，并且数组中有多个学生数据
var html = ""
for (var i = 0; i < stuList.length; i++) {
var stu = stuList[i]
html+="<tr>"
html+="<th>"+(i+1)+"</th>"
html+="<th>"+stu.name+"</th>"
html+="<th>"+stu.age+"</th>"
html+="<th>"+stu.addr+"</th>"
html+="</tr>"
}
document.getElementById("stutbody").innerHTML = html
}else{
alert(this.status)
}
}
}
//打开通道
xhr.open("GET","/ajax/ajaxrequest5?t=" + new Date().getTime(),true)
//发送请求
xhr.send()
}
}
</script>
<input type="button" value="显示学员列表" id="btn">
<table width="50%" border="1px">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>住址</th>
</tr>
<tbody id="stutbody">
<!--<tr>
<th>1</th>
<th>张三</th>
<th>20</th>
<th>北京大兴区</th>
</tr>
<tr>
<th>2</th>
<th>李四</th>
<th>22</th>
<th>北京海淀区</th>
</tr>-->
</tbody>
</table>
</body>
</html>
5. 连接数据库动态拼接json字符串 17
改进案例1
代码在com.bjpowerndoe.ajax.servlet
AjaxRequest5Servlet
package com.bjpowerndoe.ajax.servlet;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
//发送ajax请求，显示学生列表 13
@WebServlet("/ajaxrequest5")
public class AjaxRequest5Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 连接数据库，查询学员信息，拼接HTML代码，响应HTML代码到浏览器（这里就不再连接数据库了，写死了。）
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
// 连接数据库，拼接HTML代码（就不链接了，直接写吧）
// 目前存在的缺点：在后端的java代码中又开始拼接HTML代码了。
// 显然这是在后端java中写前端的HTML代码。不好维护。
// 能不能直接将数据返回，给WEB前端数据就行了。让WEB前端能够拿到数据就
// 行，然后页面展示的功能交给WEB前端来处理。
// 我们后端的java代码能不能只返回数据？？？？可以。（返回数据可以采用JSON
// 的格式，也可以采用XML的格式）
/*StringBuilder html = new StringBuilder();
html.append("");
html.append("1");
html.append("王五");
html.append("20");
html.append("北京大兴区");
html.append("");
html.append("");
html.append("2");
html.append("李四");
html.append("22");
html.append("北京海淀区");
html.append("");
out.print(html);*/
//将以上程序变成json格式的字符串 16
//String jsonStr = "[{\"name\":\"王五\",\"age\":20,\"addr\":\"北京大兴区\"}, {\"name\":\"李四\",\"age\":22,\"addr\":\"北京海淀区\"}]";
//准备StringBuilder对象，拼接JSON
StringBuilder json = new StringBuilder();
String jsonStr = "";
// 连接数据库，查询所有的学生，拼接json字符串
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
try {
// 1.注册驱动
Class.forName("com.mysql.cj.jdbc.Driver");
// 2.获取连接
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC", "root", "lzl");
// 3.获取预编译的数据库操作对象
String sql = "select name, age, addr from t_stu";
ps = conn.prepareStatement(sql);
// 4.执行SQL语句
rs = ps.executeQuery();
// 5.处理结果集
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)+"]";
} catch (Exception e) {
e.printStackTrace();
} finally {
// 6.释放资源
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (ps != null) {
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
// 响应JSON格式的字符串给前端。
out.print(jsonStr);
}
}E:\java学习\Ajax\course\course4\web
ajax6.html
<!--发送ajax请求，显示学生列表 13-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送ajax请求，显示学生列表</title>
</head>
<body>
<script type="text/javascript">
window.onload = function (){
document.getElementById("btn").onclick = function (){
//创建核心对象
var xhr = new XMLHttpRequest();
//注册回调函数
xhr.onreadystatechange = function (){
if (this.readyState==4) {
if (this.status==200) {
//document.getElementById("stutbody").innerHTML = this.responseText
//将json格式的字符串转换成json对象
var stuList = JSON.parse(this.responseText);// 是一个数组，并且数组中有多个学生数据
var html = ""
for (var i = 0; i < stuList.length; i++) {
var stu = stuList[i]
html+="<tr>"
html+="<th>"+(i+1)+"</th>"
html+="<th>"+stu.name+"</th>"
html+="<th>"+stu.age+"</th>"
html+="<th>"+stu.addr+"</th>"
html+="</tr>"
}
document.getElementById("stutbody").innerHTML = html
}else{
alert(this.status)
}
}
}
//打开通道
xhr.open("GET","/ajax/ajaxrequest5?t=" + new Date().getTime(),true)
//发送请求
xhr.send()
}
}
</script>
<input type="button" value="显示学员列表" id="btn">
<table width="50%" border="1px">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>住址</th>
</tr>
<tbody id="stutbody">
<!--<tr>
<th>1</th>
<th>张三</th>
<th>20</th>
<th>北京大兴区</th>
</tr>
<tr>
<th>2</th>
<th>李四</th>
<th>22</th>
<th>北京海淀区</th>
</tr>-->
</tbody>
</table>
</body>
</html>
6. 使用fastjson对功能进行改进 18
6.1 fastjson的用法 18
代码在com.bjpowerndoe.fastjson
FastjsonTest
package com.bjpowerndoe.fastjson;
import com.alibaba.fastjson.JSON;
import java.util.ArrayList;
import java.util.List;
//测试fastjson用法的 18
public class FastjsonTest {
public static void main(String[] args) {
//创建User类型的对象
User user = new User("111", "zhangsan", 20);
//将以上字符串转换成为json格式的字符串
// 将以上的User对象转换成json格式的字符串
// 使用阿里巴巴的fastjson组件中的JSON类即可。
// fastjson中又一个类，叫做：JSON。全部大写。
// JSON类中的方法都是静态的方法，直接调用即可。
String jsonStr = JSON.toJSONString(user);
//输出结果
//{"age":20,"id":"111","username":"zhangsan"}
System.out.println(jsonStr);
// 尝试List集合是否可以转换成数组
List userList = new ArrayList<>();
User user1 = new User("120", "lisi", 30);
User user2 = new User("130", "jackson", 33);
userList.add(user1);
userList.add(user2);
String jsonStr2 = JSON.toJSONString(userList);
//输出结果
//[{"age":30,"id":"120","username":"lisi"},{"age":33,"id":"130","username":"jackson"}]
System.out.println(jsonStr2);
}
}User
package com.bjpowerndoe.fastjson;
//配合测试fastjson用法的 18
public class User {
private String id;
private String username;
private int age;
public User() {
}
public User(String id, String username, int age) {
this.id = id;
this.username = username;
this.age = age;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}6.2 对案例1改进 18
代码在com.bjpowerndoe.ajax.servlet
AjaxRequest5Servlet
package com.bjpowerndoe.ajax.servlet;
import com.alibaba.fastjson.JSON;
import com.bjpowerndoe.ajax.beans.Student;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
//发送ajax请求，显示学生列表 13
@WebServlet("/ajaxrequest5")
public class AjaxRequest5Servlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 连接数据库，查询学员信息，拼接HTML代码，响应HTML代码到浏览器（这里就不再连接数据库了，写死了。）
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
// 连接数据库，拼接HTML代码（就不链接了，直接写吧）
// 目前存在的缺点：在后端的java代码中又开始拼接HTML代码了。
// 显然这是在后端java中写前端的HTML代码。不好维护。
// 能不能直接将数据返回，给WEB前端数据就行了。让WEB前端能够拿到数据就
// 行，然后页面展示的功能交给WEB前端来处理。
// 我们后端的java代码能不能只返回数据？？？？可以。（返回数据可以采用JSON
// 的格式，也可以采用XML的格式）
/*StringBuilder html = new StringBuilder();
html.append("");
html.append("1");
html.append("王五");
html.append("20");
html.append("北京大兴区");
html.append("");
html.append("");
html.append("2");
html.append("李四");
html.append("22");
html.append("北京海淀区");
html.append("");
out.print(html);*/
//将以上程序变成json格式的字符串 16
//String jsonStr = "[{\"name\":\"王五\",\"age\":20,\"addr\":\"北京大兴区\"}, {\"name\":\"李四\",\"age\":22,\"addr\":\"北京海淀区\"}]";
//准备StringBuilder对象，拼接JSON 17
StringBuilder json = new StringBuilder();
String jsonStr = "";
// 连接数据库，查询所有的学生，拼接json字符串
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
try {
// 1.注册驱动
Class.forName("com.mysql.cj.jdbc.Driver");
// 2.获取连接
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC", "root", "lzl");
// 3.获取预编译的数据库操作对象
String sql = "select name, age, addr from t_stu";
ps = conn.prepareStatement(sql);
// 4.执行SQL语句
rs = ps.executeQuery();
// 5.处理结果集
/*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)+"]";*/
//创建list集合 18
List 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);
} catch (Exception e) {
e.printStackTrace();
} finally {
// 6.释放资源
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (ps != null) {
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
// 响应JSON格式的字符串给前端。
out.print(jsonStr);
}
}com.bjpowerndoe.ajax.beans
Student
package com.bjpowerndoe.ajax.beans;
//这是一个javabean把展示学生信息的案例该进成fastjson的 18
public class Student {
private String name;
private int age;
private String addr;
public Student() {
}
public Student(String name, int age, String addr) {
this.name = name;
this.age = age;
this.addr = addr;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getAddr() {
return addr;
}
public void setAddr(String addr) {
this.addr = addr;
}
}E:\java学习\Ajax\course\course4\web
ajax6.html
<!--发送ajax请求，显示学生列表 13-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送ajax请求，显示学生列表</title>
</head>
<body>
<script type="text/javascript">
window.onload = function (){
document.getElementById("btn").onclick = function (){
//创建核心对象
var xhr = new XMLHttpRequest();
//注册回调函数
xhr.onreadystatechange = function (){
if (this.readyState==4) {
if (this.status==200) {
//document.getElementById("stutbody").innerHTML = this.responseText
//将json格式的字符串转换成json对象 16
var stuList = JSON.parse(this.responseText);// 是一个数组，并且数组中有多个学生数据
var html = ""
for (var i = 0; i < stuList.length; i++) {
var stu = stuList[i]
html+="<tr>"
html+="<th>"+(i+1)+"</th>"
html+="<th>"+stu.name+"</th>"
html+="<th>"+stu.age+"</th>"
html+="<th>"+stu.addr+"</th>"
html+="</tr>"
}
document.getElementById("stutbody").innerHTML = html
}else{
alert(this.status)
}
}
}
//打开通道
xhr.open("GET","/ajax/ajaxrequest5?t=" + new Date().getTime(),true)
//发送请求
xhr.send()
}
}
</script>
<input type="button" value="显示学员列表" id="btn">
<table width="50%" border="1px">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>住址</th>
</tr>
<tbody id="stutbody">
<!--<tr>
<th>1</th>
<th>张三</th>
<th>20</th>
<th>北京大兴区</th>
</tr>
<tr>
<th>2</th>
<th>李四</th>
<th>22</th>
<th>北京海淀区</th>
</tr>-->
</tbody>
</table>
</body>
</html>
