这篇文章将为大家详细讲解有关使用Ajax怎么动态显示并操作表信息，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
js文件内容如下：
计算
安全
数据库
网络和加速
企业服务
$(function () {
$.ajaxSetup({
async:false
});
var url = "/Task/Fenlei"; //servlet的url
data = {};
data.flag = "all";
$.post(url,data,function (result) {
for(var i=0;i<result.getAll.length;i++){
var id = result.getAll[i].fenlei_Id;
var name = result.getAll[i].fenlei_Name;
var newrow = "<tr id='tr"+id+"'><td>"+result.getAll[i].fenlei_Id+"</td><td id='td"+id+"'>"+result.getAll[i].fenlei_Name+
"</td><td><button onclick='del("+id+")''>删除</button><button onclick='edit("+id+")'>修改</button></td></tr>"
$("#AllInfo tr:last").after(newrow);
}
},"json");
$("#add").click(function () {
addData={};
var name = $("#name").val();
addData.name = name;
addData.flag = "add";
$.post(url,addData,function (result) {
var id = result.aFenlei.fenlei_Id;
var name = result.aFenlei.fenlei_Name;
var newrow = "<tr id='tr"+id+"'><td>"+result.aFenlei.fenlei_Id+"</td><td id='td"+id+"'>"+result.aFenlei.fenlei_Name+
"</td><td><button onclick='del("+id+")'>删除</button><button onclick='edit("+id+")'>修改</button></td></tr>"
$("#AllInfo tr:last").after(newrow);
},"json");
});
});
function del(id) {
console.log(id);
var url = "/Task/Fenlei";
delData = {};
delData.flag = "delete";
delData.id = id;
$.post(url,delData,function (result) {
if(result) {
alert("删除成功");
$("#tr"+id).remove();
} else {
alert("删除失败");
}
},"json");
};
function edit(id) {
var url = "/Task/Fenlei";
editData = {};
editData.flag = "update";
var oldname = $("#td"+id).text();
$("#td"+id).html("<input type='text'class='Input' id='new' name='FenleiName' value='"+oldname+"'/>");
$("#new").blur(function () {
var newname = $(".Input").val();
editData.newname = newname;
console.log(newname);
$("#td"+id).html("<td id='td"+id+"'>"+newname+"</td>");
$.post(url,editData,function(result){
if(result) {
alert("修改成功");
} else {
alert("修改失败");
}
},"json");
});
}jsp页面代码如下：
<%@include file="../inc/top.jsp"%>
<script src="Fenlei.js"></script>
<div class="Classify">
<h4 align="center">项目管理信息表</h4>
<div class="divBack">
<img src="#" />
</div>
<div class="divAdd">
分类名称：<input type="text" id="name"/>
<button type="button" class="btn-primary" id="add">添加</button>
</div>
<table class="table"id="AllInfo">
<tr>
<th>分类Id</th>
<th>分类名称</th>
<th>操作</th>
</tr>
</table>
</div>
<%@include file="../inc/bottom.jsp"%>处理的servlet内容如下：
public class FenleiServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String name = request.getParameter("name"); //项目分类名称
String flag = request.getParameter("flag");
String id = request.getParameter("id"); //项目分类Id
FenleiService cs = new FenleiService();
JSONObject json = new JSONObject();
if("all".equals(flag)) {
List<FenleiBean> list = cs.getAll(); //获取所有的项目分类信息
json.put("getAll",list);
response.getWriter().print(json.toJSONString());
}
if("add".equals(flag)) { //增加操作。
FenleiBean cb = cs.add(name);
json.put("aFenlei",cb);
response.getWriter().print(json.toJSONString());
}
if("delete".equals(flag)) { //删除操作
boolean result = cs.delete(id);
System.out.println(flag);
System.out.println(result);
if(result){
json.put("result",result);
json.put("msg","删除成功");
response.getWriter().print(json.toJSONString());
System.out.println(json.toJSONString());
} else {
json.put("result",result);
json.put("msg","删除失败");
response.getWriter().print(json.toJSONString());
}
}
if("update".equals(flag)) { //更新信息
System.out.println(flag);
String newname = request.getParameter("newname");
System.out.println("---------------update newname"+newname);
boolean result = cs.update(newname);
if(result){
json.put("result",result);
json.put("msg","修改成功");
response.getWriter().print(json.toJSONString());
System.out.println(json.toJSONString());
} else {
json.put("result",result);
json.put("msg","修改失败");
response.getWriter().print(json.toJSONString());
}
}
}
}</pre><pre name="code" class="javascript">ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，可以通过在后台与服务器进行少量数据交换，使网页实现异步更新。
关于使用Ajax怎么动态显示并操作表信息就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://www.jb51.net/article/145978.htm
