AJAX学习
1. 目前浏览器和服务器交互的请求发送方式
浏览器和服务器进行数据交互的基本流程为：
1. 浏览器发起http请求
2. 服务器收到请求，对请求进行解析
3. 服务器根据请求解析结果调用对应的资源处理请求
4. 服务器将处理结果响应给浏览器
5. 浏览器收到响应结果，对结果数据进行解析
6. 浏览器将解析后的数据展示在页面
目前我们了解的可以让浏览器发送请求的方式有哪些？
1. 在浏览器地址栏输入url地址后回车
2. 使用超链接
3. 使用form表单
4. 在js代码中使用window.location.href
2. 目前的浏览器发送请求访问服务器方式存在的问题
问题：
目前浏览器发送请求访问服务器后，服务器收到请求调用对应的Servlet进行处理，然后使用resp.getWriter().write()方法的方式响应结果数据给浏览器，浏览器解析数据并进行展示后会将之前浏览器页面的内容给覆盖掉！
但是在实际应用中，有时候我们希望新的响应结果是在原有界面内容的基础上继续进行显示，而不是新的响应结果直接覆盖了之前的内容！
比如：我们在网页中看到的“阅读全文”的功能：
当用户点击继续阅读后，新出来的内容应该是在旧的内容基础上继续显示！
解决：
解决上述问题，我们需要让浏览器使用一种新方式去发送请求访问服务器，然后这种用这种发送方式得到的响应结果不要覆盖原有内容，在之前内容基础上可以继续显示。
实现：
Ajax技术
3. Ajax的介绍和使用
3.1 Ajax的介绍
概念：
Ajax是由浏览器解析运行的基于JavaScript实现的网页局部刷新的技术。
作用：
实现了在当前网页中显示新的响应内容。（不会覆盖掉原有内容）
特点：
1. 一种新的让浏览器发起http请求的技术
2. 使用ajax发起的请求，响应结果不会自动的覆盖原有内容，而是可以在原有页面内容上继续显示
3. Ajax是一门基于JavaScript的技术，由浏览器解析运行，所以是一种前端（客户端）技术
4. 简单易用
3.2 Ajax的基本使用
<html>
<head>
<title>散文</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
h3{
text-align: center;
}
div{
width: 600px;
margin: 0 auto;
border: 1px solid red;
}
button{
display: block;
margin: 0 auto;
}
</style>
<script>
$(function(){
$('button').click(function () {
//创建ajax请求对象
var ajax = new XMLHttpRequest();
//创建url地址
ajax.open("get","HelloServlet");
//发送请求，传递参数,如果没有参数就写null
ajax.send(null);
//编写ajax请求后得到响应结果后的处理方式
ajax.onreadystatechange = function () {
//获取响应的结果数据
var data = ajax.responseText;
$("#pp").text(data);
$("button").remove();
}
});
})
</script>
</head>
<body>
<h3>信任</h3>
<hr>
<div>
<p>
都说网络是虚拟的，这一点无可非议，但通过网络相互认识彼此成为知己的也大有人在，
因为网络给人们搭建了一个相互沟通、彼此了解的桥梁。不经意的邂逅，
就有可能让素昧平生的两个人彼此之间擦出爱的火花，那便是爱情里所说的心与心的相知中最美的交集。
</p>
<p>
人的一生何其短暂，如果有一个人肯花时间陪你，那是对你最深的在意。情与情的相牵，
是生命最美的遇见!“女人的幸福莫过于，他真的爱她;男人的幸福莫过于，她值得他爱。”
</p>
<p>
在现实生活中，没有一个人愿意，把时间浪费在他或她不喜欢的人身上。每个人的生命里，都有一个很特殊的日子，
这个日子和一个人有关，与一段故事有关。当时光驾驭的车辙在我们的心田碾过，那些刻骨铭心的印痕，
便被永远地珍藏在记忆的年轮里。
</p>
<p>
一个懂你的人，或许不是十全十美，却义无反顾地用他的生命来爱护你的生命。爱是大度无私的，是无怨无悔的，
更是发自内心的理智的欣赏。
</p>
<button>继续阅读↓</button>
<p id="pp">
</p>
</div>
</body>
</html>
@WebServlet("/HelloServlet")
public class HelloServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
resp.getWriter().write("爱不是每天相偎相依的温暖，而是彼此走入灵魂深处的，那份无声的惦念，无言的爱恋。一份感情，能够随着时间沉淀下来，潜藏在心里的，那一定是最深的情感。真正爱你的人，不仅使你的脸上充满了微笑，更使你的心灵荡漾了无拘无束的笑声。爱一个人容易，一生只爱一个人实在不容易。所以在爱的世界里，需要信任、包容和理解。信任是理解和包容的基础，包容是信任和理解的目的，理解是信任和包容重要联系的纽带...");
}
}
3.3 Ajax的就绪状态(readystate)
在ajax对象中提供了一个监听机制,“onreadystatechange”,用来监听ajax的属性readyState的改变情况，一旦该值改变，就会触发监听中的函数的执行。
readyState的值表示的含义:
- 0:请求没有发出(在调用open()之前)
- 1:请求已经建立但是还没有发出(调用send()之前)
- 2:请求已经发出正在处理之中
- 3请求已经处理,响应中有数据可用,但是服务器还没有完全响应完
- 4:响应已经完成,浏览器已经接收到全部的响应内容
对我们来说，我们应该关注的是readyState是4时候的情况。
所以，修改上面入门案例中的监听机制使其更强壮：
<script>
$(function(){
$('button').click(function () {
//创建ajax请求对象
var ajax = new XMLHttpRequest();
//编写ajax请求后得到响应结果后的处理方式
ajax.onreadystatechange = function () {
if(ajax.readyState == 4){ // 判断就绪状态是4的时候表示响应完成
//获取响应的结果数据
var data = ajax.responseText;
$("#pp").text(data);
$("button").remove();
}
}
//创建url地址
ajax.open("get","HelloServlet");
//发送请求，传递参数,如果没有参数就写null
ajax.send(null);
});
})
</script>
3.4 Ajax请求的响应状态
通过对ajax的就绪状态做判断，我们在就绪状态是4的情况下编写我们的对响应结果的处理逻辑代码。但是是任何响应结果我们都要处理吗？答案当然是否定的。
因为服务器的响应也有状态码，比如：200、404、500等等。
所有我们在ajax中编写响应结果处理时，也要对响应状态做些判断。 可以在servlet中int i = 10 / 0; 用此行代码模拟500效果
<script>
$(function(){
$('button').click(function () {
//创建ajax请求对象
var ajax = new XMLHttpRequest();
//编写ajax请求后得到响应结果后的处理方式
ajax.onreadystatechange = function () {
if(ajax.readyState == 4){ // 判断就绪状态是4的时候表示响应完成
if(ajax.status == 200){
//获取响应的结果数据
var data = ajax.responseText;
$("#pp").text(data);
$("button").remove();
}else if(ajax.status == 404){
$("#pp").text('请求资源不存在！');
$("button").remove();
}else if(ajax.status == 500){
$("#pp").text('亲，服务器繁忙，请稍后再试！');
$("button").remove();
}else{
$("#pp").text('遇到未知错误！请联系管理员。');
$("button").remove();
}
}
}
//创建url地址
ajax.open("get","HelloServlet");
//发送请求，传递参数,如果没有参数就写null
ajax.send(null);
});
})
</script>
3.5 Ajax的同步和异步设置
观察我们目前编写的Ajax代码，发现也就这么几步：
1. 创建ajax对象
2. 编写监听函数，监听服务器对ajax请求的响应及对响应结果的处理
3. 指定ajax的请求方式和请求地址
4. 发送ajax请求，传递请求参数（可选）
这里面核心的其实是我们监听函数中的响应结果处理。
但是我们也很有可能在这些步骤后面再编写一些其他的逻辑代码。那这些代码是在什么时机执行呢？
是在ajax监听机制成功收到响应结果并处理完后再执行呢？还是正常按照代码的顺序执行呢？
这其实说的就是ajax的同步和异步的问题。ajax默认是异步的。
异步：
ajax发送请求后，正常按照顺序执行其他逻辑代码，不需要等待其监听函数响应结果的处理。
同步：
ajax发送请求后，需要等待监听函数执行完响应结果的处理，然后再执行其他的逻辑代码。
设置ajax的同步异步：
通过设置ajax对象open方法的async参数的值：
true：表示异步，默认值
false：表示同步
下面是测试同步和异步的案例，但是效果不好看出来，最好在ajax代码中编写往控制台打内容的代码，根据代码的执行顺序来查看同步和异步的效果！
<script>
$(function(){
$('button').click(function () {
//创建ajax请求对象
var ajax = new XMLHttpRequest();
//编写ajax请求后得到响应结果后的处理方式
ajax.onreadystatechange = function () {
if(ajax.readyState == 4){ // 判断就绪状态是4的时候表示响应完成
if(ajax.status == 200){
//获取响应的结果数据
var data = ajax.responseText;
$("#pp").text(data);
$("button").remove();
}else if(ajax.status == 404){
$("#pp").text('请求资源不存在！');
$("button").remove();
}else if(ajax.status == 500){
$("#pp").text('亲，服务器繁忙，请稍后再试！');
$("button").remove();
}else{
$("#pp").text('遇到未知错误！请联系管理员。');
$("button").remove();
}
}
}
//参数1：请求方式 参数2：请求地址 参数3：true表示异步，false表示同步
ajax.open("get","HelloServlet", true);
//发送请求，传递参数,如果没有参数就写null
ajax.send(null);
//其他逻辑代码
alert("哈哈哈");
});
})
</script>
3.6 Ajax的get请求和post请求的请求参数
目前我们使用的是Ajax来发送请求，请求的常用方式是get和post两种，那么ajax对于get请求和post请求如何设置呢？以及如何携带请求参数呢？
ajax设置get请求方式及携带请求参数：
//设置请求方式； 设置请求路径【get请求传递参数】； 设置同步或异步
ajax.open("get","HelloServlet?name=lucy&age=18", true);
//发送请求
ajax.send();
可以看到ajax的get请求的请求参数是直接写在请求路径后面的。
ajax设置post请求方式及携带请求参数：
//设置请求方式； 设置请求路径； 设置同步或异步
ajax.open("post","HelloServlet", true);
//请求方式是post请求，则需要设置请求头，这个请求头就表示是以表单方式提交数据, 不要把它放在open前面去执行
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//发送请求，如果是post请求的话，在这里携带请求参数
ajax.send("name=lily&age=15");
可以看到ajax的post请求传递参数的话是需要单独写在ajax的send方法中的，而且需要设置请求头，该请求头表示此次请求是以表单的方式提交！
3.7 服务器对Ajax请求的响应的数据格式及其处理（重点）
问题：
目前我们已经可以使用ajax技术在浏览器发送请求以及对响应结果的简单处理。
通过上面的案例，我们知道，使用ajax发送请求给服务器，服务器处理完请求后，不需要转发或者重定向，直接将结果打给浏览器即可，浏览器会触发回调函数完成响应结果的处理。
之前的案例中，服务器的响应结果只是一个简单的字符串数据。那如果要响应一个Java对象怎么办？比如响应查到的用户信息集合List<User>，应该以什么样的数据格式响应浏览器，浏览器端的回调函数得到响应结果后才比较好处理呢？？？
解决：
通过前面基础阶段学习，大家知道传输数据的话，我们可以使用json格式，它比较方便简单，而且也有比较好用的json工具包。所以，服务器响应Java对象数据给浏览器时，可以使用json字符串的格式！
各种Java对象的json字符串格式：
- 普通Java对象的json字符串格式：
User user = new User(1, "张三丰", 18, "北京");
{"id":1, "name":"张三丰", "age": 18, "address":"北京"}
- Map集合对应的json字符串格式：
Map<String, Object> map = new HashMap<>();
map.put("key1", "value1");
map.put("key2", "value2");
{"key1":"value1", "key2":"value2"}
- List集合对应的json字符串格式：
List<User> list = new ArrayList<>();
list.add(new User(1, "赵敏", 18, "北京"));
list.add(new User(2, "周芷若", 28, "上海"));
[
{"id":1, "name":"赵敏", "age":18, "address":"北京"},
{"id":2, "name":"周芷若", "age":28, "address":"上海"}
]
浏览器端对响应结果的处理:
浏览器端获取到的响应数据是字符串类型（普通字符串或者json字符串）
ajax获取响应数据的方式：var 变量名 = ajax对象.responseText;
- 获取到的是普通字符串数据：直接使用
- 获取到的是json格式的字符串：使用js的eval函数，将json格式的字符串转换为js对象
案例：
服务器响应的是简单字符串数据，就不演示了，前面的案例都是这种方式。下面的案例演示的是服务器响应的是json格式的字符串，注意要使用Gson工具包。
案例: js通过eval将字符串转换成js对象
<%--
eval 将字符串转换成js对象
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>index6.jsp</title>
<script src="js/jquery.js"></script>
<script>
var num = 5;
var num1 = true;
//先运行这行代码
//var obj = {id:1,name:"孙悟空",age:600, address:"花果山"};
//alert(obj.name);
var obj = '{"id":1,"name":"孙悟空","age":600,"address":"花果山"}';
//使用eval函数将json格式的字符串转为js对象，后端传递的是list集合转为js对象后就是js中的数组了
eval("var eval1 = " + obj);
alert(obj.name);
alert(eval1.name);
</script>
</head>
<body>
</body>
</html>
public class User {
private Integer id;
private String name;
private Integer age;
private String address;
public User() {
}
public User(Integer id, String name, Integer age, String address) {
this.id = id;
this.name = name;
this.age = age;
this.address = address;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", name='" + name + '\'' +
", age=" + age +
", address='" + address + '\'' +
'}';
}
}
@WebServlet("/WorldServlet")
public class WorldServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
List<User> list = new ArrayList<>();
list.add(new User(1, "段誉", 18, "大理"));
list.add(new User(2, "小龙女", 28, "燕国"));
Gson gson = new Gson();
String jsonStr = gson.toJson(list);
resp.getWriter().write(jsonStr);
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(function(){
$('button').click(function () {
//创建ajax对象
var ajax = new XMLHttpRequest();
//编写回调函数
ajax.onreadystatechange = function () {
//ajax的就绪状态是4，服务器响应的状态是200
if(ajax.readyState == 4 && ajax.status == 200){
//获取响应数据
var data = ajax.responseText;
alert("服务器响应的json格式的字符串数据：" + data);
//使用eval函数将json格式的字符串转为js对象，后端传递的是list集合转为js对象后就是js中的数组了
eval("var arr = " + data);
//遍历js对象，该对象是一个数组
for(var i = 0; i < arr.length; i++){
alert(arr[i].id + "--" + arr[i].name + "--" + arr[i].age + "--" + arr[i].address);
}
}
}
//设置请求方式， 请求路径， 异步方式
ajax.open("get", "WorldServlet", true);
//发送请求
ajax.send();
});
})
</script>
</head>
<body>
<button>点我查看数据</button>
</body>
</html>
3.8 jQuery对Ajax的封装的使用
问题：
目前我们编写的ajax代码访问服务器及对响应结果的处理流程如下：
1. 在jsp页面编写ajax相关代码
2. 用户通过浏览器访问页面
3. 浏览器获取到ajax的代码
4. 用户在浏览器中触发ajax请求
5. 服务器收到请求进行处理，处理完后按照json格式的字符串响应给浏览器
6. 浏览器收到响应数据后，触发回调函数的执行，将响应结果展示在当前的页面
在上述流程中，可以发现我们真正关注的是：
1. ajax的请求方式
2. ajax的请求地址
3. ajax的请求参数
4. ajax的回调函数
之前我们写的所有ajax相关的代码案例，都是使用原生的js语言来编写的，还是挺麻烦的。那有简单的方式吗？
我们知道jQuery是js的一个库，其实jQuery中已经对ajax完成了封装，而且形式多样！
- 第一层：
$.ajax({
type:“请求方式”,
url:“请求地址”，
data:“请求参数”，
success:function(data){
//对响应结果的处理代码
},
dataType:"服务器返回的数据类型"
})
dataType：用来指定服务器返回来的数据类型，可选值有如下：
- xml：表示服务器返回的是xml内容
- html：表示服务器返回的是html文本内容
- script：表示服务器返回的是script文本内容
- json：表示服务器返回的是json内容
- jsonp：表示使用jsonp形式调用函数，早期我们用它来解决跨域问题
- text：表示服务器返回的是纯文本字符串
- 第二层：
- .get(“请求地址”，“请求参数”，回调函数, 返回的数据类型) 或者 .post(“请求地址”，“请求参数”，回调函数, 返回的数据类型)
回调函数主要是用来处理服务器对我们的响应结果。
返回的数据类型这个参数用来设置服务器返回来的数据类型，可以是xml, html, script, json, text。
- 第三层：
$.getJSON(“请求地址”, “请求参数”, “回调函数”)
这种方式要求服务器返回的数据类型得是json格式的。
- 第四层：
$.getScript(“请求地址”, “回调函数”)
这种方式是发送ajax请求获取一个js文件。
可以看到，上面jQuery对Ajax的4层封装是越来越简单，参数也是越来越少。
案例：
@WebServlet("/ThankServlet")
public class ThankServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String username = req.getParameter("username");
String password = req.getParameter("password");
System.out.println("username:" + username);
System.out.println("password:" + password);
resp.getWriter().write("成功了！！！");
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(function(){
$('#btn1').click(function () {
$.get(
"ThankServlet",
{username:"admin", password:"123"},
function (data) {
$('div').text(data);
});
});
$('#btn2').click(function(){
$.post(
"ThankServlet",
{username:"tom", password:"789"},
function (data) {
$('div').text(data);
}
);
});
$('#btn3').click(function(){
$.ajax({
type: "post",
url: "ThankServlet",
data: "username=cat&password=369",
success: function (data) {
$('div').text(data);
},
dataType: "json"
});
});
$('#btn4').click(function () {
$.getJSON("ThankServlet",{username:"admin", password:"123"},function(data){
$('div').text(data);
});
});
$('#btn5').click(function () {
//在web目录下直接创建一个test.js文件，内容是alert(123)
$.getScript("test.js", function(){
alert("Script加载并执行成功！");
});
});
})
</script>
</head>
<body>
<button id="btn1">$.get()请求</button>
<button id="btn2">$.post()请求</button>
<button id="btn3">$.ajax()请求</button>
<button id="btn4">$.getJSON()请求</button>
<button id="btn5">$.getScript()请求</button>
<div></div>
</body>
</html>
二、Ajax查询案例
1. 需求
用户访问jsp页面，在jsp页面中显示查询按钮，用户点击查询按钮后，查询所有的员工信息，并在当前页面中显示所有的查询结果。
2. 技术要求
使用jsp+jQuery+Servlet+ajax+JDBC+数据库技术完成。
3. 数据库设计
4. 创建web项目导入相关jar包
5. 导入jQuery文件
6. 编写数据库工具类
package com.bjsxt.utils;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
public class JDBCUtils {
public static Connection getConnection() throws Exception {
Class.forName("com.mysql.cj.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/test?serverTimezone=Asia/Shanghai";
Connection connection = DriverManager.getConnection(url, "root", "root3306");
return connection;
}
public static void closeConnection(PreparedStatement ps, Connection connection){
if(ps != null){
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(connection != null){
try {
connection.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
7. 编写实体类
public class Emp {
private Integer id;
private String name;
private Integer gender;
private String position;
private Date birthday;
private Double salary;
public Emp() {
}
public Emp(Integer id, String name, Integer gender, String position, Date birthday, Double salary) {
this.id = id;
this.name = name;
this.gender = gender;
this.position = position;
this.birthday = birthday;
this.salary = salary;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getGender() {
return gender;
}
public void setGender(Integer gender) {
this.gender = gender;
}
public String getPosition() {
return position;
}
public void setPosition(String position) {
this.position = position;
}
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
public Double getSalary() {
return salary;
}
public void setSalary(Double salary) {
this.salary = salary;
}
@Override
public String toString() {
return "Emp{" +
"id=" + id +
", name='" + name + '\'' +
", gender=" + gender +
", position='" + position + '\'' +
", birthday=" + birthday +
", salary=" + salary +
'}';
}
}
8. 编写Dao层接口及实现类
public interface EmpDao {
List<Emp> getAll();
}
public class EmpDaoImpl implements EmpDao {
@Override
public List<Emp> getAll() {
Connection connection = null;
PreparedStatement ps = null;
List<Emp> list = null;
try {
connection = JDBCUtils.getConnection();
String sql = "select * from emp";
ps = connection.prepareStatement(sql);
ResultSet resultSet = ps.executeQuery();
list = new ArrayList<>();
while(resultSet.next()){
Emp emp = new Emp();
emp.setId(resultSet.getInt("id"));
emp.setName(resultSet.getString("name"));
emp.setGender(resultSet.getInt("gender"));
emp.setSalary(resultSet.getDouble("salary"));
emp.setPosition(resultSet.getString("position"));
emp.setBirthday(resultSet.getDate("birthday"));
list.add(emp);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
JDBCUtils.closeConnection(ps, connection);
}
return list;
}
}
9. 编写service层接口及实现类
public interface EmpService {
List<Emp> getAll();
}
public class EmpServiceImpl implements EmpService {
private EmpDao empDao = new EmpDaoImpl();
@Override
public List<Emp> getAll() {
return empDao.getAll();
}
}
10. 编写控制层Servlet
@WebServlet("/EmpServlet")
public class EmpServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
EmpService empService = new EmpServiceImpl();
List<Emp> list = empService.getAll();
Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();
String str = gson.toJson(list);
resp.getWriter().write(str);
}
}
11. 编写页面及ajax代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script src="js/jquery.js"></script>
<script>
$(function(){
$('button').click(function(){
$.get('EmpServlet', {}, function(data){
eval("var arr = " + data);
for(var i = 0; i < arr.length; i++){
console.log(arr[i]);
$('table').append(" <tr>\n" +
" <td>"+arr[i].id+"</td>\n" +
" <td>"+arr[i].name+"</td>\n" +
" <td>"+(arr[i].gender==1?'男':'女')+"</td>\n" +
" <td>"+arr[i].position+"</td>\n" +
" <td>"+arr[i].birthday+"</td>\n" +
" <td>"+arr[i].salary+"</td>\n" +
" </tr>");
}
});
});
})
</script>
</head>
<body>
<button>查询信息</button>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>职位</th>
<th>生日</th>
<th>工资</th>
</tr>
</table>
</body>
</html>
扫一扫
1942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
