<%@ 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);
//到这里下面为每行末尾添加修改按钮
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>
</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>
</body>
</html>
