1.ajax异步请求数据后填入模态框
请求数据的按钮(HTML)
<a class="queryA" href="javascript:void(0)" onclick="query(${register.id})"> <span class="glyphicon glyphicon-search"></span></a>
ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框(JS)
//查询单个 function query(id) {$.ajax({url : "/small/productServlet",async : true,type : "POST",data : {"type" : "query","id" : id},// 成功后开启模态框 success : showQuery,error : function() {alert("请求失败");},dataType : "json"}); }// 查询成功后向模态框插入数据并开启模态框。data是返回的JSON对象 function showQuery(data) {$("#name1").val(data.name);$("#xinghao1").val(data.xinghao);$("#address1").val(data.address);$("#department1").val(data.department);$("#unit1").val(data.unit);$("#number1").val(data.number);$("#price1").val(data.price);$("#totalprice1").val(data.totalprice);$("#come1").val(data.come);$("#buytime1").val(data.buytime);$("#useperson1").val(data.useperson);$("#handleperson1").val(data.handleperson);$("#admini1").val(data.admini);// 显示模态框$('#queryInfo').modal('show'); }
后台处理ajax请求并返回JSON串(Java)
protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {RegisterService service = new RegisterServiceImpl();request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");response.setContentType("text/html; charset=UTF-8");String type = request.getParameter("type");if (type != null && "add".equals(type)) {try {this.add(request, response, service);} catch (Exception e) {// TODO Auto-generated catch block e.printStackTrace();}}if (type != null && "query".equals(type)) {try {this.query(request, response, service);} catch (Exception e) {// TODO Auto-generated catch block e.printStackTrace();}}}protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request, response);}public void query(HttpServletRequest request, HttpServletResponse response, RegisterService service)throws Exception {Integer id = Integer.parseInt(request.getParameter("id"));Register register = service.getRegisterById(id);Gson gson = new Gson();String json = gson.toJson(register);System.out.println(json);response.getWriter().write(json);}
JSON串:
{"id":16,"name":"测试名称16","address":"测试地址2","department":"测试部门2","unit":"测试单位2","number":1,"price":1.5,"totalprice":1.5,"come":"来源2","buytime":"八月 23, 2017","useperson":"使用人2","handleperson":"经办人2","admini":"管理员部门2"}
2.ajax异步请求删除数据后刷新页面
请求删除的按钮(HTML)
<a class="" href="javascript:void(0)" onclick="deleteInfo(${register.id})"> <span class="glyphicon glyphicon-trash"></a>
Ajax请求删除数据后刷新页面(JS)
// ajax异步删除后刷新页面 function deleteInfo(id) {alert("dele");$.ajax({url : "/small/productServlet",async : true,type : "POST",data : {"type" : "delete","id" : id},success : function(data) {alert(data);// 删除成功后刷新页面 window.location.reload();},error : function() {alert("请求失败");},dataType : "text"}); }
后台处理删除的ajax请求(Java)
// 根据id删除public void delete(HttpServletRequest request, HttpServletResponse response, RegisterService service)throws Exception {Integer id = Integer.valueOf(request.getParameter("id"));boolean result = service.deleteRegisterById(id);if (result) {response.getWriter().write("success delete!");}}