idea ajax 用法,idea原生ajax数据处理(增删改查)

最新推荐文章于 2024-04-04 23:32:19 发布

夜雨微亭er

最新推荐文章于 2024-04-04 23:32:19 发布

阅读量917

点赞数

文章标签： idea ajax 用法

这篇博客展示了如何利用原生Ajax实现表格数据的增删改查功能。通过监听window.onload事件，调用select()函数获取数据并展示在带有滚动条的表格中。每个表格行包含书本的编号、书名、作者、价格以及操作按钮，点击按钮可以触发相应的更新、删除和详情操作。当删除操作被确认后，会通过Ajax发送GET请求到后台执行删除，并在成功后更新表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

User: 邦杠Date:2018/8/15

Time:19:54

Tochange this template use File | Settings | File Templates.--%>

$Title$

/*关键设置 tbody出现滚动条*/table tbody{display:block;height:500px;overflow-y:scroll;overflow-x:hidden;

}table thead, tbody tr{display:table;width:100%;table-layout:fixed; }table thead th{height:40px}table tbody td{height:30px}td input{margin-left:5px;width:40px}

本页面用原生ajax进行展示

编号

书名

作者

价格

操作

window.οnlοad=function() {

select();

}functioninsert() {

window.location.href=("insert.jsp");

}functionupdate(id) {

window.location.href=("BookUpdate?id="+id);

}functiondele(id) {if(confirm("是否真的删除?")){varajax=newXMLHttpRequest();

ajax.open("get","BookDelete?id="+id);

ajax.send(null);

ajax.onreadystatechange=function() {

console.log(ajax.readyState);

console.log(ajax.status);if(ajax.readyState== 4 &&ajax.status== 200){if(ajax.responseText){

alert("删除成功");

select();

}

}functionsele(id){

window.location.href=("BookUpdate?sele=sele&id="+id);

}functionselect() {//创建对象

varajax=newXMLHttpRequest();//http请求

ajax.open("get","BookSelect.do")//发送请求 (get为null post为参数)

ajax.send(null);//设置状态

ajax.onreadystatechange=function() {if(ajax.readyState== 4 &&ajax.status== 200){vardata=JSON.parse(ajax.responseText);vartbody=document.getElementById("tbody");

tbody.innerHTML="";

console.log(data.data.length);for(vari=0;i

varinputse=document.createElement("input");

inputse.value="详细";

inputse.setAttribute("onclick","sele("+data.data[i].id+");");varinputde=document.createElement("input");

inputde.value="删除";

inputde.setAttribute("onclick","dele("+data.data[i].id+");");varinputup=document.createElement("input");

inputup.value="修改";

inputup.setAttribute("onclick","update("+data.data[i].id+");");

inputup.type=inputde.type=inputse.type="button";//添加进入

varthid=document.createTextNode(data.data[i].id);varthname=document.createTextNode(data.data[i].name);varthprice=document.createTextNode(data.data[i].price);varthcc1=document.createTextNode(inputse);varthcc2=document.createTextNode(inputde);varthcc3=document.createTextNode( inputup);

tdcc.appendChild(inputse);

tdcc.appendChild(inputde);

tdcc.appendChild(inputup);

tdid.appendChild(thid);

tdname.appendChild(thname);

tdprice.appendChild(thprice);

tr.appendChild(tdid);

tr.appendChild(tdname);

tr.appendChild(tdprice);

tr.append(tdcc);

tbody.append(tr);

}