好资源导航 » 文章资讯 » Ajax实现动态显示并操作表信息的方法

Ajax实现动态显示并操作表信息的方法

2023-09-08 19:06:05 61

在jsp连接数据库访问并显示数据库信息时，使用Ajax利用json对象会在页面不刷新的情况下获取到数据。但若是要显示数据库表中的信息，就需要动态的生成表的行以及单元格。并且对每一行的操作也是需要动态绑定的。

今天分享给各位的是完成在对数据库表信息的显示、增加、删除、修改。显示时通过用HTML代码来控制table行的增加。修改和删除是通过button的onclick()事件完成的。onclick()的参数也是动态改变的，这样的话在操作时就可以知道是要对哪一行进行操作了。修改的方法中又用到修改HTML代码使普通变为并获取到原始值作为输入框的默认值，在输入框失去焦点后自动保存数据。并再把变为

代码很详细，希望能对你有所帮助。

js文件内容如下：

$(function(){
$.ajaxSetup({
async:false
});
varurl="/Task/Fenlei";//servlet的url
data={};
data.flag="all";
$.post(url,data,function(result){
for(vari=0;i"+result.getAll[i].fenlei_Id+""+result.getAll[i].fenlei_Name+
"删除修改"
$("http://www.haoziyuan.cc#AllInfotr:last").after(newrow);
}
},"json");
$("http://www.haoziyuan.cc#add").click(function(){
addData={};
varname=$("http://www.haoziyuan.cc#name").val();
addData.name=name;
addData.flag="add";
$.post(url,addData,function(result){
varid=result.aFenlei.fenlei_Id;
varname=result.aFenlei.fenlei_Name;
varnewrow=""+result.aFenlei.fenlei_Id+""+result.aFenlei.fenlei_Name+
"删除修改"
$("http://www.haoziyuan.cc#AllInfotr:last").after(newrow);


},"json");
});
});
functiondel(id){
console.log(id);
varurl="/Task/Fenlei";
delData={};
delData.flag="delete";
delData.id=id;
$.post(url,delData,function(result){
if(result){
alert("删除成功");
$("http://www.haoziyuan.cc#tr"+id).remove();
}else{
alert("删除失败");
}
},"json");
};
functionedit(id){
varurl="/Task/Fenlei";
editData={};
editData.flag="update";
varoldname=$("http://www.haoziyuan.cc#td"+id).text();
$("http://www.haoziyuan.cc#td"+id).html("");
$("http://www.haoziyuan.cc#new").blur(function(){
varnewname=$(".Input").val();
editData.newname=newname;
console.log(newname);
$("http://www.haoziyuan.cc#td"+id).html(""+newname+"");
$.post(url,editData,function(result){
if(result){
alert("修改成功");
}else{
alert("修改失败");
}
},"json");
});
}

jsp页面代码如下：

<%@includefile="../inc/top.jsp"%>


项目管理信息表

分类名称：

添加

分类Id 分类名称操作

<%@includefile="../inc/bottom.jsp"%>

处理的servlet内容如下：

publicclassFenleiServletextendsHttpServlet{
protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
doGet(request,response);
}
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
Stringname=request.getParameter("name");//项目分类名称
Stringflag=request.getParameter("flag");
Stringid=request.getParameter("id");//项目分类Id
FenleiServicecs=newFenleiService();
JSONObjectjson=newJSONObject();
if("all".equals(flag)){
Listlist=cs.getAll();//获取所有的项目分类信息
json.put("getAll",list);
response.getWriter().print(json.toJSONString());
}
if("add".equals(flag)){//增加操作。
FenleiBeancb=cs.add(name);
json.put("aFenlei",cb);
response.getWriter().print(json.toJSONString());
}
if("delete".equals(flag)){//删除操作
booleanresult=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);
Stringnewname=request.getParameter("newname");
System.out.println("---------------updatenewname"+newname);
booleanresult=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());
}
}
}
}

以上这篇Ajax实现动态显示并操作表信息的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

Ajax实现动态显示并操作表信息的方法

热门推荐

随机推荐