1 <%--前端使用layer框架与bootstrap框架ajax无刷新 、模态框
2 Created by IntelliJ IDEA.
3 User: 冰与火之歌 4 Date: 2019/8/30 5 Time: 22:44 6 To change this template use File | Settings | File Templates. 7 --%> 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 9 <html> 10 <head> 11 <title>列表</title> 12 <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css" /> 13 14 <!--2.引入layerUI样式； --> 15 <link rel="stylesheet" href="${pageContext.request.contextPath}/layer/layer/theme/default/layer.css"> 16 17 <script src="${pageContext.request.contextPath}/bootstrap/js/jquery.min.js"></script> 18 <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script> 19 20 <!--5.引入LayerUi的js库； --> 21 <script src="${pageContext.request.contextPath}/layer/layer/layer.js"></script> 22 </head> 23 <body> 24 25 <div class="container"> 26 <div class="panel panel-primary"> 27 <div class="panel-heading"> 28 <%--c3p0+mysql+bootstrap+javascript+jquery+ajax--%> 29 <h1>使用ajax异步加载用户数据</h1> 30 </div> 31 <div class="panel-body"> 32 <form class="form-inline"> 33 <input class="form-control" name="" placeholder="请输入关键字查询。。。"/> 34 <a href="#" class="btn btn-primary">根据姓名模糊查询</a> 35 <a href="javascript:changeFunction()" id="add_btn" class="btn btn-success">新增用户</a> 36 <a href="javascript:removelistFunction()" class="btn btn-danger">删除多个</a> 37 </form> 38 <table class="table table-bordered table-hover table-striped text-center"> 39 <tr> 40 <td>全选 41 <input type="checkbox" id="all_check"> 42 </td> 43 <td>用户id</td> 44 <td>用户名</td> 45 <td>密码</td> 46 <td>操作</td> 47 </tr> 48 <tbody id="tb"> 49 <%--剩下的内容由ajax异步 加载！--%> 50 </tbody> 51 </table> 52 </div> 53 <div class="panel-footer text-right"> 54 李某人为您服务 55 </div> 56 </div> 57 </div> 58 59 <!-- 模态框（Modal） --> 60 <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 61 <div class="modal-dialog"> 62 <div class="modal-content"> 63 <div class="modal-header"> 64 <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 65 × 66 </button> 67 <h4 class="modal-title" id="myModalLabel"> 68 添加(修改)一个用户 69 </h4> 70 </div> 71 <div class="modal-body"> 72 <!--放正文的地方； 不要用表单提交 ，也不要配置action! --> 73 <form id="myFrm" name="myFrm" class="form-horizontal"> 74 <div class="form-group"> 75 <label for="uname" class="col-md-4 control-label" >用户名：</label> 76 <div class="col-md-6"> 77 <input type="hidden" name="cid" id="cid" value="0" /> 78 <input class="form-control" name="uname" id="uname" > 79 </div> 80 </div> 81 <div class="form-group"> 82 <label for="upwd" class="col-md-4 control-label" >密码：</label> 83 <div class="col-md-6"> 84 <input class="form-control" name="upwd" id="upwd" > 85 </div> 86 </div> 87 <div class="form-group"> 88 <label class="col-md-4 control-label"> </label> 89 <div class="col-md-8"> 90 <a href="javascript:saveFunction()" id="save" class="btn btn-success" style="font-size: 24px; text-shadow:black 5px 3px 3px"> 91 提交保存 92 </a> 93 </div> 94 </div> 95 </form> 96 97 </div> 98 </div><!-- /.modal-content --> 99 </div><!-- /.modal --> 100 </div> 101 102 </body> 103 104 <script> 105 $(function () { 106 //页面一加载，就调用方法 107 listFunction(); 108 109 }); 110 111 //复选框点击，则全选 112 $("#all_check").change("click",function () { 113 /*必须要用prop方法，才能实现，可能有版本的原因*/ 114 $("[name=tdbox_stuid]").prop("checked",$(this).is(":checked")) 115 }); 116 117 /** 118 * 删除多个，需要选中其中的复选框 119 * */ 120 function removelistFunction() { 121 //如果没有选中则无法删除，，，all_check 122 //遍历所有的checkbox标签，判断是否选中 123 var td_obj = $("input:checkbox[name='tdbox_stuid']:checked"); 124 //选中的长度大于0，表示有选中的，可以点击批量删除按钮 125 if (td_obj.length>0){ 126 var id_array = ''; 127 $.each(td_obj,function(){ 128 //拿到id 129 id_array = id_array+$(this).parent().next().html()+","; 130 // window.alert("你选了："+ 131 // $('input[type=checkbox]:checked').length+"个，其中有："+$(this).parent().next().html()); 132 }); 133 alert(id_array); 134 // //Ajax执行 135 $.post("/student?stu=remove","removeid="+id_array,function (data) { 136 if (data!="0") { 137 layer.msg("删除成功",{icon:6}); 138 }else{ 139 layer.msg("删除失败",{icon:5}); 140 } 141 },"text"); 142 listFunction();//刷新 143 } else{ 144 layer.msg("亲！至少选中一行数据哦！",{icon:5}); 145 } 146 } 147 148 //删除一个，需要带有参数id 149 function removeFunction(k_id) { 150 if( confirm("确定要删除【学号"+k_id+"】的学生么？删除后数据将丢失！！！")){ 151 $.get("/student?stu=remove&removeid="+k_id,function (data) { 152 // alert(data=="1"?"删除成功":"删除失败"); 153 if (data!="0") { 154 layer.msg("删除成功",{icon:6}); 155 }else{ 156 layer.msg("删除失败",{icon:5}); 157 } 158 //刷新，将数据在查询一遍 159 listFunction(); 160 },"text"); 161 } 162 } 163 164 /** 165 * 新增用户,打开模态框, 166 * 同时还需要将学历、角色ajax出来（还未实现，二级联动） 167 */ 168 function changeFunction() { 169 //点击新增，弹出模态框,但是在出现之前清空输入框中的数据 170 $("#cid").val(""); 171 $("#uname").val(""); 172 $("#upwd").val(""); 173 $("#myModal").modal("show"); 174 } 175 //根据id查询对象 176 function updateFunction(k_id) { 177 //做修改之前，先根据id查询一片 178 $.get("/student?stu=findbyidd&updatebyid="+k_id,function (data) { 179 //将数据保存到收入框中 180 $("#cid").val(k_id); 181 $("#uname").val(data.stuName); 182 $("#upwd").val(data.pwd); 183 //打开模态框 184 $("#myModal").modal("show"); 185 },"json"); 186 } 187 //做新增或修改操作 188 function saveFunction() { 189 var uid = $("#cid").val(); 190 var uname = $("#uname").val(); 191 var upwd = $("#upwd").val(); 192 //post方式为：url、参数、回调函数、数据类型 193 $.post("/student?stu=change","insertid="+uid+"&uname="+uname+"&upwd="+upwd,function (data) { 194 //表示新增 195 if (uid == "" || uid == null || uid == undefined){ 196 if (data=="1") { 197 // alert("新增成功") 198 layer.msg("新增成功",{icon:6}); 199 }else { 200 // alert("新增失败") 201 layer.msg("新增失败",{icon:5}); 202 } 203 } else{ 204 //表示修改 205 if (data=="1") { 206 // alert("修改成功") 207 layer.msg("修改成功", {icon: 6}); 208 }else { 209 // alert("修改失败") 210 layer.msg("修改失败",{icon:5}); 211 } 212 } 213 },"text"); 214 215 //完成新增后或者修改后，需在查询一遍，才会更新后的数据 216 listFunction(); 217 //需要关闭模态框 218 $("#myModal").modal("hide"); 219 } 220 221 /** 222 * 加载数据列表函数 223 */ 224 function listFunction() { 225 //ajax,get方法：url（包含参数）、回调函数、返回数据类型 226 $.get("/student?stu=list",function (data) { 227 //接收jsonString数据，拼接HTML 228 var tr = ""; 229 //遍历json中的数据，k为下标，v为对象 230 $(data).each(function (k,v) { 231 tr += "<tr>"; 232 tr += "<td><input type='checkbox' name='tdbox_stuid' /></td>"; 233 tr += "<td>"+v.stuId+"</td>"; 234 tr += "<td>"+v.stuName+"</td>"; 235 tr += "<td>"+v.pwd+"</td>"; 236 tr += "<td><a href='javascript:updateFunction("+v.stuId+")' class='btn btn-warning'>修改</a> "; 237 tr += "<a href='javascript:removeFunction("+v.stuId+")' class='btn btn-danger'>删除</a></td>"; 238 tr += "</tr>"; 239 }); 240 $("#tb").html(tr); 241 },"json"); 242 } 243 </script> 244 245 </html>
package cn.ajax.servlet; import cn.ajax.dao.StudentDao; import cn.ajax.entity.Student; import com.alibaba.fastjson.JSONObject; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; import java.lang.reflect.Array; import java.util.Arrays; import java.util.HashSet; import java.util.List; import java.util.Set; @WebServlet("/student") public class StudentServlet extends HttpServlet { private StudentDao sd = new StudentDao(); protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String stu = request.getParameter("stu"); if ("list".equals(stu)){//json stulist(request,response); }else if ("change".equals(stu)){//text stuaddORupdate(request,response); }else if ("remove".equals(stu)){//text sturemove(request,response); }else if ("findbyidd".equals(stu)){//json findbyid(request,response); } } /** * 根据id查询对象 * @param request * @param response */ private void findbyid(HttpServletRequest request, HttpServletResponse response) throws IOException { // response.setContentType("text/json;charset=UTF-8"); int id = Integer.parseInt(request.getParameter("updatebyid")); Student studentById = sd.findStudentById(id); String s = JSONObject.toJSONString(studentById); PrintWriter writer = response.getWriter(); writer.write(s); writer.close(); } /** * 根据id删除对象 * @param request * @param response * @throws IOException */ private void sturemove(HttpServletRequest request, HttpServletResponse response) throws IOException { // response.setContentType("text/html;charset=UTF-8"); String removeid = request.getParameter("removeid"); PrintWriter writer = response.getWriter(); String msg = "0"; if (!(removeid==null && "".equals(removeid))){ // 分割去重 String[] split = removeid.split(","); System.out.println("拿到的字符串："+ Arrays.toString(split)); Set<Integer> set = new HashSet<>(); for (String s : split) { set.add(Integer.parseInt(s)); } // 作删除 // int i = sd.doRemvoeStudentById(Integer.parseInt(removeid)); int i = sd.doRemvoeStudentById(set); msg = i+""; } writer.write(msg); writer.close(); } /** * 新增或者修改change * @param request * @param response */ private void stuaddORupdate(HttpServletRequest request, HttpServletResponse response) throws IOException { response.setContentType("text/html;charset=UTF-8"); String insertid = request.getParameter("insertid"); String uname = request.getParameter("uname"); String upwd = request.getParameter("upwd"); PrintWriter writer = response.getWriter(); Student student = new Student(); String msg = "0"; //开始新增 System.out.println(insertid+"参数id"); if (insertid==null || "".equals(insertid)) { student.setStuName(uname); student.setPwd(upwd); int i = sd.doAddStudent(student); msg = i + ""; }else{ //开始修改 student.setStuId(Integer.parseInt(insertid)); student.setPwd(upwd); student.setStuName(uname); int i = sd.doUpdateStudent(student); msg = i + ""; } writer.write(msg); writer.close(); } /** * 模糊查询 * @param request * @param response */ private void stulist(HttpServletRequest request, HttpServletResponse response) throws IOException { response.setContentType("text/json;charset=UTF-8"); String uname = request.getParameter("uname"); if (uname==null||"".equals(uname)){ //表示模糊查询 } List<Student> students = sd.listStudentByName(""); students.forEach(s-> System.out.println(s)); //将数据转换为json格式的字符串 String jsonString = JSONObject.toJSONString(students); PrintWriter writer = response.getWriter(); writer.write(jsonString); writer.close();//输出到页面 } }
728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
