使用Ajax怎么动态显示并操作表信息
这篇文章将为大家详细讲解有关使用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[i].fenlei_Id+" "+result.getAll[i].fenlei_Name+ " " $("#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 = " " $("#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(""); $("#new").blur(function () { var newname = $(".Input").val(); editData.newname = newname; console.log(newname); $("#td"+id).html(" "+result.aFenlei.fenlei_Id+" "+result.aFenlei.fenlei_Name+ " "+newname+" "); $.post(url,editData,function(result){ if(result) { alert("修改成功"); } else { alert("修改失败"); } },"json"); }); }
jsp页面代码如下:
<%@include file="../inc/top.jsp"%><%@include file="../inc/bottom.jsp"%>项目管理信息表
分类名称:
分类Id 分类名称 操作
处理的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)) { Listlist = 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()); } } } }
什么是ajax
ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,可以通过在后台与服务器进行少量数据交换,使网页实现异步更新。
关于使用Ajax怎么动态显示并操作表信息就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
当前名称:使用Ajax怎么动态显示并操作表信息
转载源于:http://scyanting.com/article/joedci.html