修改页面
获取要修改的对象的servlet
package com.gzsxt.control.user; import java.io.IOException; 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 com.gzsxt.pojo.SysUser; import com.gzsxt.service.SysUserService; import com.gzsxt.service.impl.SysUserServiceImpl; /** * 根据页面ID值,调用方法,返回一个对象 * @author Administrator * */ @WebServlet("/getuser") public class GetUSerServlet extends HttpServlet{ //实例化service层 SysUserService service =new SysUserServiceImpl(); @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //获取页面传递的ID值 String id =req.getParameter("id"); //类型转换 int u_id=Integer.valueOf(id); if(u_id>0) { //调用业务层方法 SysUser user =service.getUserById(u_id); //把对象存入到Request对象 req.setAttribute("user", user); req.getRequestDispatcher("/userpage/updateuser.jsp").forward(req, resp); } else { // } } }
dao层的实现
@Override public SysUser getUserById(int id) { SysUser user=null; //编写SQL语句 String sql ="select * from s_user "; try { if(id>0) { sql+="where s_id=?"; } //执行sql PreparedStatement statement=util.getConnection(sql); //接收参数 if(id>0) { statement.setInt(1, id); } //执行sql ResultSet result=statement.executeQuery(); //判断结果集中是否有数据 if(result.next()) { user=new SysUser(); user.setS_id(result.getInt("s_id"));//主键 user.setS_username(result.getString("s_userName")); user.setS_uname(result.getString("s_uname")); user.setS_email(result.getString("s_email")); user.setS_phone(result.getLong("s_phone")); user.setS_password(result.getString("s_password")); } } catch (SQLException e) { e.printStackTrace(); } return user; }
updatauser.jsp
将存有修改数据的对象请求转发到updatauser.jsp(和addlist.jsp页面一样)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绿地中央广场综合物业办公系统 - 用户添加页面</title> <meta name="keywords" content="绿地中央广场综合物业办公系统"> <meta name="description" content="绿地中央广场综合物业办公系统"> <link rel="${pageContext.request.contextPath }/shortcut icon" href="favicon.ico"> <link href="${pageContext.request.contextPath }/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet"> <link href="${pageContext.request.contextPath }/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet"> <link href="${pageContext.request.contextPath }/css/plugins/iCheck/custom.css" rel="stylesheet"> <link href="${pageContext.request.contextPath }/css/animate.min.css" rel="stylesheet"> <link href="${pageContext.request.contextPath }/css/style.min862f.css?v=4.1.0" rel="stylesheet"> </head> <body class="gray-bg"> <div class="wrapper wrapper-content animated fadeInRight"> <div class="row"> <div class="col-sm-8"> <div class="ibox float-e-margins"> <div class="ibox-title"> <h5>用户修改</h5> <div class="ibox-tools"> <a class="collapse-link"> <i class="fa fa-chevron-up"></i> </a> <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#"> <i class="fa fa-wrench"></i> </a> <ul class="dropdown-menu dropdown-user"> <li><a href="form_basic.html#">选项1</a> </li> <li><a href="form_basic.html#">选项2</a> </li> </ul> <a class="close-link"> <i class="fa fa-times"></i> </a> </div> </div>
在表单的value值里写出默认要修改的值
<div class="ibox-content"> <!-- 修改的表单 --> <form method="post" action="updateuser" class="form-horizontal" id="myform"> <!-- 存放ID值 --> <div class="form-group"> <label class="col-sm-2 control-label">编号</label> <div class="col-sm-10"> <input type="text" readonly="readonly" name="u_id" class="form-control" value="${user.s_id }"> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group"> <label class="col-sm-2 control-label">用户名</label> <div class="col-sm-10"> <input type="text" id="username" name="username" class="form-control" value="${user.s_username }"> <!-- 错误提示信息 --> <span id="errorusername"></span> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group"> <label class="col-sm-2 control-label">昵称</label> <div class="col-sm-10"> <input type="text" id="uname" name="uname" value="${user.s_uname }" class="form-control"> <span id="erroruname"></span> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group"> <label class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" value="${user.s_password }" class="form-control" name="password"> <span id="errorpwd"></span> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group"> <label class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <input type="email" id="email" value="${user.s_email }" name="email" placeholder="输入一个正确的邮箱.." class="form-control"> <span id="erroremail"></span> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group"> <label class="col-sm-2 control-label">手机号码</label> <div class="col-sm-10"> <input type="text" id="phone" value="${user.s_phone }" maxlength="11" name="phone" placeholder="输入一个正确的手机号." class="form-control"> <span id="errorphone"></span> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group"> <div class="col-sm-4 col-sm-offset-2"> <button class="btn btn-primary" id="submit" type="submit">保存内容</button> <button class="btn btn-white" type="reset">取消</button> </div> </div> </form> </div> </div> </div> </div> </div>
装饰代码
<div id="modal-form" class="modal fade" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <div class="row"> <div class="col-sm-6 b-r"> <h3 class="m-t-none m-b">登录</h3> <p>欢迎登录本站(⊙o⊙)</p> <form role="form"> <div class="form-group"> <label>用户名:</label> <input type="email" placeholder="请输入用户名" class="form-control"> </div> <div class="form-group"> <label>密码:</label> <input type="password" placeholder="请输入密码" class="form-control"> </div> <div> <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>登录</strong> </button> <label> <input type="checkbox" class="i-checks">自动登录</label> </div> </form> </div> <div class="col-sm-6"> <h4>还不是会员?</h4> <p>您可以注册一个账户</p> <p class="text-center"> <a href="form_basic.html"><i class="fa fa-sign-in big-icon"></i></a> </p> </div> </div> </div> </div> </div> </div> <script src="${pageContext.request.contextPath }/js/jquery.min.js?v=2.1.4"></script> <script src="${pageContext.request.contextPath }/js/bootstrap.min.js?v=3.3.6"></script> <script src="${pageContext.request.contextPath }/js/content.min.js?v=1.0.0"></script> <script src="${pageContext.request.contextPath }/js/plugins/iCheck/icheck.min.js"></script> <!--引入jQuery关于form的插件 --> <script src="${pageContext.request.contextPath }/js/jquery.form.js"></script> <script> $(document).ready(function(){$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",})}); </script> <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script> </body>
jquery代码-小部分验证
<script type="text/javascript"> $(document).ready(function(){ //定义一个全局变量。作用:作为用户名重名的时候,表单不能提交的一个依据。 变量为true,证明表单可以提交,为false的时候,表单不能提交 var resName=true; /* 用户验证 */ $("#username").blur(function(){ var nameValue=$(this).val();//获取文本框的value值 //使用ajax进行异步验证 $.ajax({ type:'post', url:'../checkuser',//留意路径问题..、:返回上一级 data:{"name":nameValue}, dataType:'json', success:function(data){ if(data.id==1){//用户名已存在 $("#errorusername").html(data.decoration); resName=false; }else if (data.id==2) {//可用 $("#errorusername").html(data.decoration); resName=true; } else if(data.id==3){//用户名不能为空 $("#errorusername").html(data.decoration); resName=false; } } }); }); /* 通用的函数(函数封装) nodeId:当前对象的ID值 regular:正则表达式 errorId:错误提示信息的标签ID rightMessage:正确的提示信息 errorMessage:错误提示信息内容 */ function checkUserMessage(nodeId,regular,errorId,rightMessage,errorMessage) { var Value=$("#"+nodeId).val(); //正则表达式 var Reg=regular; //通过正则表达式的test()进行匹配 if(Reg.test(Value)){//用户名可以 $("#"+errorId).html(rightMessage); $("#"+errorId).css("color","green"); return true; }else{ $("#"+errorId).html(errorMessage); $("#"+errorId).css("color","red"); return false; } }
/* 使用jQuery的form表单插件实现用户添加功能 */ $("#submit").click(function(){ $("#myform").ajaxForm({ dataType:'json', //表单提交前,触发的函数 beforeSubmit:function(){//返回true,则表单可用提交。返回false,则不能提交 //调用刚才封装好的验证用户数据的函数 //验证用户名 /* var nameFlag=checkUserMessage("username",/^([\u4e00-\u9fa5]){2,8}$/ig,"errorusername", "用户名格式正确,是否重名?","用户名格式不正确.."); //昵称 var uicFlag=checkUserMessage("uname",/^([\u4e00-\u9fa5]){2,8}$/ig,"erroruname", "昵称格式正确","昵称格式不正确.."); //密码 var pwdFlag=checkUserMessage("password",/^[a-zA-z]{2}\w{4,6}$/,"errorpwd", "密码格式正确","密码格式不正确.."); //邮箱 var emailFlag=checkUserMessage("email",/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ig,"erroremail", "邮箱格式正确","邮箱格式不正确.."); //手机号码 var phoneFlag=checkUserMessage("phone", /^1(3|4|5|7|8)\d{9}$/ig,"errorphone", "手机格式正确","手机格式不正确.."); */ return resName; }, success:function(data){ if(data.id==1){ alert(data.decoration); //跳出当前iframe嵌套课件 top.location.replace('index.jsp'); }else if (data.id==0) { alert(data.decoration); } } }); }); }); </script> </html>
UpdateuserServlet(将form表单要修改的接收进来)
package com.gzsxt.control.user; import java.io.IOException; 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 com.alibaba.fastjson.JSON; import com.gzsxt.message.Message; import com.gzsxt.service.SysUserService; import com.gzsxt.service.impl.SysUserServiceImpl; @WebServlet("/updateuser") public class UpdateUserServlet extends HttpServlet{ //实例化service层 SysUserService service =new SysUserServiceImpl(); @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //获取form表单数据 int id =Integer.valueOf(req.getParameter("u_id"));//直接实现类型转换 String username =req.getParameter("username"); String uname =req.getParameter("uname"); String password =req.getParameter("password"); String email =req.getParameter("email"); String phone =req.getParameter("phone"); Long phoneLong=Long.parseLong(phone); //调用service的修改数据方法 int row=service.updatUser(id, username, uname, password, email, phoneLong); if(row>0) {//证明修改成功.. Message message=new Message(1, "修改成功"); String jsonmString=JSON.toJSONString(message); resp.getWriter().append(jsonmString); }else { Message message=new Message(0, "修改失败"); String jsonmString=JSON.toJSONString(message); resp.getWriter().append(jsonmString); } } }
dao层的实现修改功能
@Override public int updatUser(int id, String username, String uname, String pwd, String email, Long phone) { //编写sql语句 String sql="update s_user set s_userName=?,s_uname=?,s_password=?,s_email=?,s_phone=? where s_id=?"; PreparedStatement statement=util.getConnection(sql); int row=0; //存入参数 try { if(username!=null) { statement.setString(1, username); } if(uname!=null) { statement.setString(2, uname); } if(pwd!=null) { statement.setString(3, pwd); } if(email!=null) { statement.setString(4, email); } if(phone!=null) { statement.setLong(5,phone); } if(id>0) { statement.setInt(6, id); } row=statement.executeUpdate(); } catch (SQLException e) { e.printStackTrace(); } return row; }