```javascript
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- 连接数据库必须将“java.sql”导入 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> 查询所有的系统 </title>
</head>
<!-- json 字符串 -->
<script type="text/javascript">
function getStudents(){ //身体的
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","http://localhost:8080/src/all",true); //拿到id的数据 数据对象
console.log(xmlhttp.status) // 0:请求未初始化(还没有调用 open())
console.log(xmlhttp.readyState) // 1:请求已经建立,但是还没有发送(还没有调用 send())
xmlhttp.send();
xmlhttp.onreadystatechange = function() { //这类似于回调函数的做法。
if (xmlhttp.readyState === 4 && xmlhttp.status ===200){
var obj = JSON.parse(xmlhttp.responseText); //[{id:1,password:root},]
var tbody =document.getElementById('tbMain'); //放到主题里面去
for(var i=0; i<obj.length; i++) { //遍历数组长度 遍历一下json数据
var trow = getDataRow(obj[i]); //定义一个方法,返回tr数据
tbody.appendChild(trow);
}
}
}
}
function getDataRow(h){
var row = document.createElement('tr'); //创建行
var idCell = document.createElement('td'); //创建第一列id
idCell.innerHTML = h.id; //填充数据
row.appendChild(idCell); //加入行 ,下面类似
var usernameCell = document.createElement('td');//创建第二列name
usernameCell.innerHTML = h.username;
row.appendChild(usernameCell);
var passwordCell = document.createElement('td');//创建第三列pass
passwordCell.innerHTML = h.password;
row.appendChild(passwordCell);
//删除的按钮
//到这里,json中的数据已经添加到表格中,下面为每行末尾添加删除按钮
var delCell = document.createElement('td');//创建第四列,操作列
row.appendChild(delCell);
var btnDel = document.createElement('input'); //创建一个input控件
btnDel.setAttribute('type','button'); //type="button"
btnDel.setAttribute('value','删除');
//删除操作
btnDel.onclick=function(){
if(confirm("确定删除这一行嘛?")){
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","http://localhost:8080/src/iddelete?id="+h.id,true); //拿到id的数据 //数据对象
console.log(xmlhttp.readyState) // 0:请求未初始化(还没有调用 open())
console.log(xmlhttp.status) // 1:请求已经建立,但是还没有发送(还没有调用 send())
xmlhttp.send();
var parentNode = this.parentNode.parentNode.parentNode;
var childParentNode = this.parentNode.parentNode;
<!-- 把id传入数据库 -->
xmlhttp.onreadystatechange = function(){ //这类似于回调函数的做法。
if (xmlhttp.readyState === 4 && xmlhttp.status ===200){
//找到按钮所在行的节点,然后删掉这一行
//btnDel - td - tr - tbody - 删除(tr)
//刷新网页还原。实际操作中,还要删除数据库中数据,实现真正删除
parentNode.removeChild(childParentNode);
}
}
}
}
delCell.appendChild(btnDel); //把删除按钮加入td,别忘了
//到这里下面为每行末尾添加修改按钮
var updateCell = document.createElement('td'); //创建第五列,操作列
row.appendChild(updateCell); //将 updateCell添加成当前节点的最后一个子节点
var update = document.createElement('input'); //创建一个input控件
update.setAttribute('type', 'button'); //type="button"
update.setAttribute('value', '修改');
//更改数据(先要查询到数据,点击保存,修改数据,把id把值传过去)
update.onclick = function () {
var xmlhttp;
if(confirm("确定要修改吗")){
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var user = document.getElementById("username").value;
var pass = document.getElementById("password").value;
xmlhttp.open("POST", "http://localhost:8080/src/Idupdate?id="+ h.id, true); //拿到id的数据 //数据对象
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
//xmlhttp.send("username=32232&password=123132161");
xmlhttp.send("username="+user+"&password="+pass);
<!-- 把id传入数据库 -->
xmlhttp.onreadystatechange = function () { //这类似于回调函数的做法。
if (xmlhttp.readyState === 4 && xmlhttp.status === 200){
// 数据是保存在 异步对象的 属性中 //在控制打印 文本格式
console.log(xmlhttp.responseText);
//先要查询到数据,点击保存,修改数据,把id把值传过去
// 显示div
document.getElementById("form").style.display = "block";
//获取表单数据
}
}
}
}
updateCell.appendChild(update); //把修改按钮加入td,别忘了
return row; //返回tr数据
}
function save(){
var a = document.getElementById("username").value;
var b = document.getElementById("password").value;
alert(a)
alert(b)
}
//添加数据的按钮
//添加的操作
</script>
<body onload="getStudents()">
<table id='myTable' border="1" align="center" width="50%" cellspacing="0">
<thead>
<tr>
<th>i d: </th>
<th>账号:</th>
<th>密码:</th>
<th>功能1:</th>
<th>功能2:</th>
</tr>
</thead> <!--thead用来放标题之类的东西-->
<tbody id="tbMain"> </tbody> <!--tbody放数据本体-->
</table>
<div id ="form" style="display:none;" method="post">
<div> 账号:<input name="username" id="username"/> </div>
<div> 密码:<input name="password" id="password"/> </div>
<input type="button" onclick="save()" value="保存" />
</div>
<form name="myForm" method="post" action="Addmember" onsubmit="return add()">
i d :<input type="text" name="id" placeholder="请输入要添加id">
账 号:<input type="text" name="username" placeholder="请输入要添加的账号">
密 码:<input type="text" name="password" placeholder="请输入要添加的密码">
<input type="submit" onclick="add()" value="添加"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
```