1、前台界面
2、ajax提交的前台代码
3、WebContent/jsp/form_002.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String root = request.getContextPath(); %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>表单--表单提交的三种方式</title> <!-- 引入外部样式 --> <link rel="stylesheet" type="text/css" href="<%=root %>/css/common.css" /> <!-- 引入easyui依赖库 --> <script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script> <link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="<%=root %>/js/jquery-easyui-1.2.6/themes/icon.css" /> <script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script> <script type="text/javascript" src="<%=root %>/js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript"> $(function() { /* 表单提交的三种方式: 1、传统ajax方式提交 2、定义form自动提交 3、定义form手动提交 */ /* 1. validatebox验证框组件 A、required:定义是否字段应被输入。 B、missingMessage:当文本框是空时出现的提示文字。 C、invalidMessage:当文本框的内容无效时出现的提示文字。 D、validType:定义字段的验证类型,与自定义验证规则配合使用。 */ //自定义验证规则 $.extend($.fn.validatebox.defaults.rules, { midLength: { validator: function(value, param){ return value.length >= param[0] && value.length <= param[1]; }, message: '' }, equalLength: { validator: function(value, param){ return value.length == param[0]; }, message: '密码必须为{0}个字符' } }); /* 2. numberbox数字框组件 A、min:允许的最小值,若小于最小值,则值自动设置为最小值。 B、max:允许的最大值,若大于最大值,则值自动设置为最大值。 C、该组件继承了validatebox验证框组件,故可以使用其的属性。 D、precision:显示在小数点后面的最大精度。 */ $('#age').numberbox({ min:0, max:150, required:true, missingMessage:'年龄必填', precision:0 }); /* 3. datebox日期框组件 A、该组件继承了combo组件,可以使用其的editable属性 B、editable:定义是否用户可以往文本域中直接输入文字 C、combo组件继承了validatebox验证框组件,故可以使用其的required和missingMessage属性 */ $('#birthday').datebox({ required:true, missingMessage:'生日必填', editable:false }); /* 4. combobox下拉框组件 A、url:从远程加载列表数据的url。 B、valueField:绑定到 ComboBox的 value上的基础数据的名称,与json的key一致。 C、textField:绑定到combobox的text上的基础数据的名称,与json的value一致。 D、panelHeight:值为auto表示下拉框的高度自适应。 */ $('#city').combobox({ url:'<%=root%>/UserServlet?method=getCity', valueField:'id', textField:'name', required:true, missingMessage:'所属城市必填', editable:false, panelHeight:'auto' }); //numberbox数字框组件 $('#salary').numberbox({ min:1000, max:20000, required:true, missingMessage:'薪水必填', precision:2 }); /* 5. datetimebox日期时间框组件 */ $('#starttime,#endtime').datetimebox({ required:true, missingMessage:'时间必填', editable:false }); //表单提交方式一:通过ajax方式提交表单 $('#btn').click(function() { $.ajax({ type:'post', //请求方式 url:'<%=root%>/UserServlet?method=save', //请求地址 cache:false, //是否清空缓存 data:$('#myform').serialize(), //向后台发送的数据 dataType:'text', //服务器返回的数据类型 success:function(result) { //将字符串转换为json对象: //方法一:var result = eval('('+result+')'); //方法二:var result = $.parseJSON(result); var result = $.parseJSON(result); $.messager.show({ title:result.status , msg :result.message }); } }); }); }); </script> </head> <body> <div id="mydiv" class="easyui-panel" title="新增用户" iconCls="icon-add" style="width:400px; height:350px;"> <form id="myform" action="" method="post"> <table> <tr> <td>用户名:</td> <td><input type="text" name="username" class="easyui-validatebox" required="true" missingMessage="用户名必填" validType="midLength[2,5]" invalidMessage="用户名必须在2到5个字符之间"/></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="password" class="easyui-validatebox" required="true" missingMessage="密码必填" validType="equalLength[4]" /></td> </tr> <tr> <td>性别:</td> <td> 男<input type="radio" name="sex" checked="checked" value="1"> 女<input type="radio" name="sex" value="2"> </td> </tr> <tr> <td>年龄:</td> <td><input id="age" type="text" name="age"></td> </tr> <tr> <td>出生日期:</td> <td><input id="birthday" type="text" name="birthday" style="width:146px;"/></td> </tr> <tr> <td>所属城市:</td> <td><input id="city" type="text" name="city" style="width:146px;"></td> </tr> <tr> <td>薪水:</td> <td><input id="salary" type="text" name="salary" /></td> </tr> <tr> <td>开始时间:</td> <td><input id="starttime" type="text" name="starttime" style="width:160px;"/></td> </tr> <tr> <td>结束时间:</td> <td><input id="endtime" type="text" name="endtime" style="width:160px;"/></td> </tr> <tr> <td>个人描述:</td> <td><input type="text" name="description" class="easyui-validatebox" required="true" missingMessage="个人描述必填" validType="midLength[5,50]" invalidMessage="个人描述必须在5到50个字符之间"/></td> </tr> <tr align="center"> <td colspan="2"> <a id="btn" class="easyui-linkbutton">保存</a> </td> </tr> </table> </form> </div> </body> </html>
4、com.easyui.servlet.UserServlet.java
package com.easyui.servlet; import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import com.easyui.bean.CityBean; import com.easyui.bean.TUserBean; import com.easyui.dao.UserDao; /** * 用户控制器类 * * @author LiPiaoShui */ public class UserServlet extends HttpServlet { private static final long serialVersionUID = 9140830946116659042L; private UserDao uDao = new UserDao(); protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); String method = request.getParameter("method"); if ("getList".equals(method)) { getList(request, response); } else if("getCityName".equals(method)) { getCityName(request, response); } else if("getCity".equals(method)) { getCity(request, response); } else if("save".equals(method)) { save(request, response); } } /** * 保存用户信息 * @param request * @param response */ private void save(HttpServletRequest request, HttpServletResponse response) { //获取前台传入的信息 String username = request.getParameter("username"); String password = request.getParameter("password"); String sex = request.getParameter("sex"); int age = Integer.parseInt(request.getParameter("age")); String birthday = request.getParameter("birthday"); int city = Integer.parseInt(request.getParameter("city")); String salary = request.getParameter("salary"); String starttime = request.getParameter("starttime"); String endtime = request.getParameter("endtime"); String description = request.getParameter("description"); //设置用户信息 TUserBean user = new TUserBean(); user.setUsername(username); user.setPassword(password); user.setSex(sex); user.setAge(age); user.setBirthday(birthday); user.setCity(city); user.setSalary(salary); user.setStarttime(starttime); user.setEndtime(endtime); user.setDescription(description); try { //保存用户信息 int count = uDao.save(user); String json = "{\"status\":\"提示信息\",\"message\":\"保存成功\"}"; if(count != 1) { json = "{\"status\":\"提示信息\",\"message\":\"保存失败\"}"; } response.setContentType("text/html;charset=utf-8"); response.getWriter().write(json); } catch (IOException e) { e.printStackTrace(); } } /** * 获取全部城市信息 * @param request * @param response */ private void getCity(HttpServletRequest request, HttpServletResponse response) { try { List<CityBean> cList = new ArrayList<CityBean>(); cList.add(new CityBean(1,"北京")); cList.add(new CityBean(2,"上海")); cList.add(new CityBean(3,"深圳")); cList.add(new CityBean(4,"长春")); response.setContentType("text/html;charset=utf-8"); //[{"id":1,"name":"北京"},{"id":2,"name":"上海"},{"id":3,"name":"深圳"},{"id":4,"name":"长春"}] response.getWriter().write(JSONArray.fromObject(cList).toString()); } catch (IOException e) { e.printStackTrace(); } } /** * 获取城市信息 * @param request * @param response */ private void getCityName(HttpServletRequest request, HttpServletResponse response) { try { List<CityBean> cList = new ArrayList<CityBean>(); cList.add(new CityBean(1,"北京")); cList.add(new CityBean(2,"上海")); cList.add(new CityBean(3,"深圳")); cList.add(new CityBean(4,"长春")); int id = Integer.parseInt(request.getParameter("id")); for(CityBean city:cList) { if(id == city.getId()) { response.setContentType("text/html;charset=utf-8"); response.getWriter().write(JSONObject.fromObject(city).toString()); } } } catch (IOException e) { e.printStackTrace(); } } /** * 获取全部用户信息 * * @param request * @param response */ private void getList(HttpServletRequest request, HttpServletResponse response) { try { //当前页码 int currentPage = Integer.parseInt(request.getParameter("page")); //每页显示的大小 int pageSize = Integer.parseInt(request.getParameter("rows")); // 获取分页显示的用户信息 List<TUserBean> uList = uDao.queryByPagination(currentPage, pageSize); //获取总用户数 int total = uDao.getTotal(); // json格式 --> {"total":10,"rows":[{},{}]} String json = "{\"total\":" + total + ",\"rows\":" + JSONArray.fromObject(uList).toString() + "}"; response.setContentType("text/html;charset=utf-8"); response.getWriter().write(json); } catch (Exception e) { e.printStackTrace(); } } }
5、com.easyui.dao.UserDao.java
package com.easyui.dao; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.List; import com.easyui.bean.TUserBean; import com.easyui.util.DBUtil; /** * 用户数据库操作类 * @author LiPiaoShui */ public class UserDao { /** * 获取全部用户信息 * @return */ public List<TUserBean> getList() { Connection conn = null; PreparedStatement pstmt = null; ResultSet rs = null; List<TUserBean> uList = new ArrayList<TUserBean>(); try { String sql = "select * from t_user"; conn = DBUtil.getConnection(); pstmt = conn.prepareStatement(sql); rs = pstmt.executeQuery(); while(rs.next()) { TUserBean user = new TUserBean(); user.setId(rs.getInt("id")); user.setUsername(rs.getString("username")); user.setPassword(rs.getString("password")); user.setSex(rs.getString("sex")); user.setAge(rs.getInt("age")); user.setBirthday(rs.getString("birthday")); user.setCity(rs.getInt("city")); user.setSalary(rs.getString("salary")); user.setStarttime(rs.getString("starttime")); user.setEndtime(rs.getString("endtime")); user.setDescription(rs.getString("description")); uList.add(user); } } catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(rs, pstmt, conn); } return uList; } /** * 分页显示用户信息 * @param currentPage * @param pageSize * @return */ public List<TUserBean> queryByPagination(int currentPage,int pageSize) { Connection conn = null; PreparedStatement pstmt = null; ResultSet rs = null; List<TUserBean> uList = new ArrayList<TUserBean>(); try { String sql = "select * from t_user limit ?,?"; conn = DBUtil.getConnection(); pstmt = conn.prepareStatement(sql); pstmt.setInt(1, (currentPage-1)*pageSize); pstmt.setInt(2, pageSize); rs = pstmt.executeQuery(); while(rs.next()) { TUserBean user = new TUserBean(); user.setId(rs.getInt("id")); user.setUsername(rs.getString("username")); user.setPassword(rs.getString("password")); user.setSex(rs.getString("sex")); user.setAge(rs.getInt("age")); user.setBirthday(rs.getString("birthday")); user.setCity(rs.getInt("city")); user.setSalary(rs.getString("salary")); user.setStarttime(rs.getString("starttime")); user.setEndtime(rs.getString("endtime")); user.setDescription(rs.getString("description")); uList.add(user); } } catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(rs, pstmt, conn); } return uList; } /** * 获取总用户数 * @return */ public int getTotal() { Connection conn = null; PreparedStatement pstmt = null; ResultSet rs = null; int total = 0; try { String sql = "select count(1) from t_user"; conn = DBUtil.getConnection(); pstmt = conn.prepareStatement(sql); rs = pstmt.executeQuery(); if(rs.next()) { total = rs.getInt(1); } } catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(rs, pstmt, conn); } return total; } /** * 保存用户信息 * @param user * @return */ public int save(TUserBean user) { Connection conn = null; PreparedStatement pstmt = null; int count = 0; try { String sql = "insert into t_user(username,password,sex,age,birthday,city," + "salary,starttime,endtime,description) value(?,?,?,?,?,?,?,?,?,?)"; conn = DBUtil.getConnection(); pstmt = conn.prepareStatement(sql); pstmt.setString(1, user.getUsername()); pstmt.setString(2, user.getPassword()); pstmt.setString(3, user.getSex()); pstmt.setInt(4, user.getAge()); pstmt.setString(5, user.getBirthday()); pstmt.setInt(6, user.getCity()); pstmt.setString(7, user.getSalary()); pstmt.setString(8, user.getStarttime()); pstmt.setString(9, user.getEndtime()); pstmt.setString(10, user.getDescription()); count = pstmt.executeUpdate(); } catch (SQLException e) { e.printStackTrace(); } finally { DBUtil.close(null, pstmt, conn); } return count; } }