<%@ 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.readyState) // 0:请求未初始化(还没有调用 open())
console.log(xmlhttp.status) // 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 show = document.createElement('input'); //创建一个input控件
show.setAttribute('type', 'button'); //type="button"
show.setAttribute('value', '修改');
//更改数据(先要查询到数据,点击保存,修改数据,把id把值传过去)
show.onclick = function () {
if (confirm("确定修改这一行嘛?")) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST", "http://localhost:8080/src/Idupdate?id="+h.id, true); //拿到id的数据 //数据对象
//xmlhttp.open("POST","http://localhost:8080/src/Idupdate",true)
var data_str = "username="+username+"&password="+password;
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
console.log(xmlhttp.readyState) // 0:请求未初始化(还没有调用 open())
console.log(xmlhttp.status) // 1:请求已经建立,但是还没有发送(还没有调用 send())
//正式发送
// xmlhttp.send();
xmlhttp.send(data_str);
var parentNode = this.parentNode.parentNode.parentNode;
var childParentNode = this.parentNode.parentNode;
<!-- 把id传入数据库 -->
xmlhttp.onreadystatechange = function () { //这类似于回调函数的做法。
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
//先要查询到数据,点击保存,修改数据,把id把值传过去
// 显示div
document.getElementById("form").style.display = "block";
//获取表单数据
var username = document.getElementById('username').value;
var password = document.getElementById('username').value;
}
}
}
}
updateCell.appendChild(show); //把修改按钮加入td,别忘了
return row; //返回tr数据
}
function save() {
alert(document.getElementById("username").value)
alert(document.getElementById("password").value)
}
</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>功能:</th>
</tr>
</thead> <!--thead用来放标题之类的东西-->
<tbody id="tbMain"> </tbody> <!--tbody放数据本体-->
</table>
<form id ="form" action="Idupdate" style="display:none;" method="post">
<div>
id:<input name="id" id="id"/>
</div>
<div>
账号:<input name="username" id="username"/>
</div>
<div>
密码:<input name="password" id="password"/>
</div>
<!-- <button onclick="save()">保存</button> -->
<input type="button" value="保存" onclick="save()"/>
</form>
</body>
</html>

怎么通过json把表当的数据发送到后端
- 写回答
- 好问题 0 提建议
- 关注问题
- 邀请回答
-
1条回答 默认 最新
- 忍气吞声埋头苦干 2021-08-17 13:37关注
function update() { var formData = {}; items = document.getElementsByClassName('form-control')#获取表单数据 for (var x = 0; x < items.length; x++) { formData[String(items[x].name)] = items[x].value #组织Json格式数据 } #ajax提交 $.ajax({ url: "路径", type: "POST", data: formData, success: function (event) { if (event == 'success') { alert('成功!') } else { alert('请检查数据格式!') } window.location.reload() } } ) }
如果有帮助,请点个采纳哦~
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 1无用