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;
}
}
相关推荐
在这个“login-form-using-ajax.rar”压缩包中，我们重点关注的是如何利用Ajax来创建一个动态的登录表单，实现用户在不刷新整个页面的情况下，后台校验用户名是否存在。 首先，让我们理解Ajax的核心概念。Ajax是一...
总之，"Js封装的弹窗表单-xForm"是一个强大的工具，通过JavaScript实现的弹窗表单功能可以极大地提升开发效率和用户体验。通过深入理解和运用这个插件，开发者能够轻松创建出功能丰富、交互性强的网页表单。
Aspnet-ASP.NET-Core-2-jQuery-Ajax-Modal-Form.zip,使用asp.net core 2 mvc jquery ajax bootstrap model formasp.net-core-2-jquery-ajax-model-form实现模式表单,asp.net是一个开源的web框架，用于使用.net构建...
Ajax-Codeigniter-3-Ajax-Form-Submission.zip,“codeigniter 3 ajax表单提交和验证教程”一集的源代码,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建...
8. **API接口**：考虑到Ajax的使用，可能项目还提供了RESTful API接口，供前端通过Ajax调用来获取或更新数据，这样前后端可以分离开发，提高项目的可维护性和扩展性。 综上所述，"Laravel开发-salao-despesas-ajax...
传统的表单验证方式通常在用户提交表单后进行，如果数据不符合要求，用户需要重新填写整个表单，这显然是不理想的。PHP与AJAX（Asynchronous JavaScript and XML）结合的表单验证技术可以实现无刷新验证，即在用户...
在Laravel框架中，开发Web应用时经常需要处理表单提交和验证。Laravel的Form Builder和Ajax结合使用，可以创建...通过学习和实践这个项目，你可以深入理解Laravel中Ajax表单验证的完整流程，从而提升你的Web开发技能。
Ajax-pardot-form-ajax-handler.zip,为salesforce pardot表单设置ajax提交，而不是使用iframe发布，并处理结果。,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它...
Ajax-searchwp-live-ajax-search.zip,[wordpress plugin]使用实时搜索增强您的搜索表单（如果安装了searchwp，则使用searchwp）,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和...
Laravel-Bootstrap-Modal-Form, 使用AJAX提交模式中的Bootstrap 表单，使用 Laravel 验证 Laravel-Bootstrap-Modal-Form你的Laravel 应用程序的表单验证扩展插件。... 这里脚本保持模式打开，通过AJAX提交表单，查
**Ajax 表单验证**是Web开发中一种提高用户体验的技术，它允许在不刷新整个页面的情况下，通过异步方式向服务器发送数据并获取反馈。在传统的表单提交中，用户填写完信息点击提交按钮，页面会跳转或者重载，这在数据...
Ajax-Rails-4-AJAX-Form.zip,rails 4 ajax表单示例,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况下...
1. 创建（Create）：用户填写表单后，前端通过AJAX发送POST请求到PHP脚本，PHP处理插入数据库的逻辑。 2. 读取（Read）：前端可以向PHP发起GET请求，PHP返回数据库中的数据，前端再用这些数据填充表格。 3. 更新...
// 1 使用FormData进行表单的数据处理 var fd = new FormData(form); // 2 使用$.ajax发送fd // 需要指定两个属性 // - processData : false // - contentType : false $.ajax({ method : 'POST', url : '/...
8. **验证（Validation）**：Laravel提供内置的数据验证机制，可以在服务器端或客户端（通过Ajax）进行表单验证，确保提交的信息符合业务规则。 9. **响应（Responses）**：控制器处理完请求后，会返回一个响应，...
Ajax-Rails-4-AJAX-modal-form-render-JS-response-as-table-row.zip,rails 4 ajax模式表单将js响应呈现为表行,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于...
总的来说，使用jQuery的ajax方法提交表单是一种高效且灵活的方式，能够无缝集成到现有的jQuery应用中。通过理解以上知识点，开发者可以创建更动态、响应更快的Web应用。在提供的压缩包文件“jqueryform”中，你应该...
在本项目"Laravel开发-salao-atendimento-ajax"中，我们关注的是利用Laravel框架进行Web应用程序的开发，特别是涉及到前端与后端通过Ajax技术进行交互的场景。帕科特·拉雷维尔作为项目的开发者，可能已经实现了一个...