1. 异步增加
- 在JSP中为
新增按钮绑定事件，点击按钮后同步跳转到add页面
@RequestMapping("/toAdd")
public String toAdd(){
return "user/add";
}
- 在add.html中进行异步操作
- 为新增按钮添加id
-
html代码：
//异步增加操作 $("#addBtn").click(function () { //在相应的位置添加id。使用id选择器取出对应值 var floginacct =$("#floginacct"); var fusername = $("#fusername"); var femail = $("#femail") ; // 异步操作。局部刷新 $.ajax({ type:"POST", url: "${APP_PATH}/user/doAdd.do", //传入json数据 data:{ loginacct :floginacct.val(), username :fusername.val(), email : femail.val(), }, //在执行前可进行校验等操作，true才能继续执行 beforeSend:function () { return true ; }, // 成功返回的操作 success : function (result){ if(result.success){ //返回值为success，并跳转到index页面 window.location.href="${APP_PATH}/user/toIndex.htm"; }else{ // 返回值为false，进行相关的提示 layer.msg(result.message,{time:1000,icon:5,shift:6}); } }, // 返回值失败的操作 error : function () { layer.msg("保存用户失败",{time:1000,icon:5,shift:6}); } }); }); -
进行相关后台程序的编写
Controller：
@ResponseBody @RequestMapping("/doAdd") public Object doAdd(User user){ AjaxResult result = new AjaxResult(); try { int count = userService.saveUser(user); result.setSuccess(count == 1 ); }catch (Exception e){ result.setSuccess(false); e.printStackTrace(); result.setMessage("查询数据失败"); } //将对象序列化为JSON字符串，以流的方式返回 return result; }Impl：
public int saveUser(User user) { // 时间对象转换为字符串 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Date date = new Date(); String formatTime = sdf.format(date); user.setCreatetime(formatTime); // 将密码进行加密 user.setUserpswd(MD5Util.digest(Const.PASSWORD)); return userMapper.insert(user); }Mapper:
<!--useGeneratedKeys="true" keyProperty="id"设置主键回填--> <insert id="insert" parameterType="com.itstudy.crw.bean.User" useGeneratedKeys="true" keyProperty="id"> insert into t_user (id, loginacct, userpswd, username, email, createtime ) values (#{id,jdbcType=INTEGER}, #{loginacct,jdbcType=VARCHAR}, #{userpswd,jdbcType=CHAR}, #{username,jdbcType=VARCHAR}, #{email,jdbcType=VARCHAR}, #{createtime,jdbcType=CHAR} ) </insert>
- 为新增按钮添加id
2. 异步修改
-
在JSP中找到修改按钮绑定点击事件，并传入id值。注意该处为拼串，需要注意引号的使用
@RequestMapping("/toUpdate") public String toUpdate(Integer id,Map map){ User user = userService.getUserById(id); map.put("user",user); return "/user/update"; }2.跳转到修改页面，找到相应的值并添加id属性，修改对应的value
-
添加异步操作
// 异步修改操作，局部刷新 $("#updateBtn").click(function () { // 根据ID属性取值 var floginacct =$("#floginacct"); var fusername = $("#fusername"); var femail = $("#femail") ; $.ajax({ type:"POST", url: "${APP_PATH}/user/doUpdate.do", data:{ // 定义并根据ID获取值，双引号建议添上 "loginacct" :floginacct.val(), "username" :fusername.val(), "email" : femail.val(), // 获取id需要用双引号 "id": "${user.id}" }, beforeSend:function () { return true ; }, success : function (result){ if(result.success){ window.location.href="${APP_PATH}/user/toIndex.htm"; }else{ layer.msg(result.message,{time:1000,icon:5,shift:6}); } }, error : function () { layer.msg("修改用户失败",{time:1000,icon:5,shift:6}); } }); }); -
后台代码
Controller：
@ResponseBody @RequestMapping("/doUpdate") public Object doUpdate(User user){ AjaxResult result = new AjaxResult(); try { int count = userService.updateUser(user); result.setSuccess(count == 1 ); }catch (Exception e){ result.setSuccess(false); e.printStackTrace(); result.setMessage("修改数据失败"); } //将对象序列化为JSON字符串，以流的方式返回 return result; }Impl：
public int updateUser(User user) { return userMapper.updateByPrimaryKey(user); }Mapper：
<update id="updateByPrimaryKey" parameterType="com.itstudy.crw.bean.User"> update t_user set loginacct = #{loginacct,jdbcType=VARCHAR}, username = #{username,jdbcType=VARCHAR}, email = #{email,jdbcType=VARCHAR} where id = #{id,jdbcType=INTEGER}
-
3. 异步单删
-
在html中找到按钮并绑定点击事件，传入id和loginacct。拼串注意引号的使用
-
编写异步方法
// 异步单项删除操作 -- 带提示消息 function deleteUser(id,loginacct) { // 删除前先使用 layer 进行提示是否删除 layer.confirm("确认要删除["+loginacct +"]用户吗？",{icon:3,title:'提示'},function (cindex) { layer.close(cindex); $.ajax({ type:"POST", url: "${APP_PATH}/user/doDelete.do", data:{ // 此id 是传入的n.id值 "id": id }, beforeSend:function () { return true ; }, success : function (result){ if(result.success){ window.location.href="${APP_PATH}/user/toIndex.htm"; }else{ layer.msg(result.message,{time:1000,icon:5,shift:6}); } }, error : function () { layer.msg("删除用户失败",{time:1000,icon:5,shift:6}); } }); }, function(cindex){ layer.close(cindex); }); } -
后台代码实现
controller：
@ResponseBody @RequestMapping("/doDelete") public Object doDelete(Integer id){ AjaxResult result = new AjaxResult(); try { int count = userService.doDelete(id); result.setSuccess(count == 1 ); }catch (Exception e){ result.setSuccess(false); e.printStackTrace(); result.setMessage("修改数据失败"); } //将对象序列化为JSON字符串，以流的方式返回 return result; }Impl：
public int doDelete(Integer id) { return userMapper.deleteByPrimaryKey(id); }Mapper：
<delete id="deleteByPrimaryKey" parameterType="java.lang.Integer"> delete from t_user where id = #{id,jdbcType=INTEGER}
4. 异步多删
-
修改checkbox，注意prop和attr的区别是前者执行多次，后者执行一次后失效
-
为
删除添加id，编写异步代码
//异步多项删除操作 - 带提示消息 //设置全部勾选操作 $("#allCheckbox").click(function () { var checkedStatus = this.checked ; $("tbody tr td input[type='checkbox']").prop("checked",checkedStatus); }); //为删除按钮添加绑定事件 $("#deleteBatchBtn").click(function () { //添加被勾选的项 var selectCheckbox = $("tbody tr td input:checked"); //首先判断是否勾选了删除项 if(selectCheckbox.length == 0){ layer.msg("至少选择一个用户进行删除!请选择用户!", {time:1000, icon:5, shift:6}); return false ; } //设置idStr初值为空串 var idStr = ""; //将需要删除的项进行拼串 $.each(selectCheckbox,function(i,n){ // url?id=5&id=6&id=7 if(i!=0){ idStr += "&"; } idStr += "id="+n.id; }); //使用layer进行提示是否删除。第一个函数为确认操作，第二个函数为取消，不进行操作 layer.confirm("确认要删除这些用户吗?", {icon: 3, title:'提示'}, function(cindex){ layer.close(cindex); // 进行异步操作 $.ajax({ type : "POST", //idStr是被拼成的字符串，所以不要用{} data : idStr, url : "${APP_PATH}/user/doDeleteBatch.do", beforeSend : function() { return true ; }, success : function(result){ if(result.success){ window.location.href="${APP_PATH}/user/toIndex.htm"; }else{ layer.msg("删除用户失败", {time:1000, icon:5, shift:6}); } }, error : function(){ layer.msg("删除失败", {time:1000, icon:5, shift:6}); } }); }, function(cindex){ layer.close(cindex); }); });-
后台代码
Controller ： @ResponseBody @RequestMapping("/doDeleteBatch") //将传入的拼写字符串用Integer数组接收 public Object doDeleteBatch(Integer[] id){ AjaxResult result = new AjaxResult(); try { int count = userService.doDeleteBatchUser(id); result.setSuccess(count == id.length); }catch (Exception e){ result.setSuccess(false); e.printStackTrace(); result.setMessage("修改数据失败"); } //将对象序列化为JSON字符串，以流的方式返回 return result; }Impl：
public int doDeleteBatchUser(Integer[] ids) { int totalCount = 0; for (Integer id : ids) { int count = userMapper.deleteByPrimaryKey(id); totalCount += count; } if(totalCount!=ids.length){ throw new RuntimeException("批量删除失败"); } return totalCount; }
-
5. 重置
添加id，为id绑定点击事件
$("#resetBtn").click(function () {
// 转换 将jQuery对象转换为dom对象 ;jQuery对象中没有reset()函数
$("#updateForm")[0].reset();
});
238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
