SSM框架中前端页面（AJAX+Jquery+spring mvc+bootstrap）
前端新增页面的模态框，采用bootstarp建立。定义了empName，email，gender，depatName，四个属性的ID；其中保存按钮的ID：emp_save_btn,对应的点击函数如下：
$("#emp_save_btn").click(function() {
//1.模态框的表单数据提交给服务器进行保存
//先对要提交给服务器的数据进行校验
if (!validate_add_form()) {
return false;
};
//判断用户名是否成功
if ($(this).attr("ajax-va") == "error") {
return false;
}
//2.发送ajax请求保存员工,serialize表示序列化方法,将填入数据序列化
//$("#empAddmodal form").serialize();
//添加数据后，跳转到最后一页
$.ajax({
url : "${APP_PATH}/emp",
type : "POST",
data : $("#empAddmodal form").serialize(),
success : function(result) {
//alert(result.msg);
//当员工保存工作
//1.关闭模态框
$("#empAddmodal").modal('hide');
//2.来到最后一页，显示刚才保存的数据
//发送ajax请求显示最后一页数据即可,总记录数肯定大于页数
to_page(totalRecord);
}
});
});
步骤是 模态框的表单数据提交给服务器进行保存，所以先对要提交给服务器的数据进行校验，采用方法为validate_add_form()，然后判断用户名是否已经存在。
调用ajax方法，发出emp请求（转到controller层），POST方式，将填入的数据序列化，成功就保存数据，跳转到最后一页显示添加的数据
validate_add_form方法先拿到要检验的数据采用正则表达式确定是否符合输入要求，如果符合要求，调用show_validate_msg方法，代码如下：
//校验表单数据
function validate_add_form() {
//1.拿到要校验的数据，使用正则表达式
var empName = $("#empName_add").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9fff]{2,5})/;
if (!regName.test(empName)) {
//alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");
//bootstrap校验，给父标签加上has-error
// $(ele).parent().addClass("has-error");
// $(ele).next("span").text(msg);
show_validate_msg("#empName_add","error","用户名可以是2-5位中文或者6-16位英文和数字的组合");
return flase;
}else{
show_validate_msg("#empName_add","success","");
}
show_validate_msg，有三个参数，第一个为标签ID，第二个为状态，第三个显示文本。
//显示校验结果的提示信息，抽象成方法
function show_validate_msg(ele,status,msg){
//清除当前元素的校验状态
$(ele).parent().removeClass("has-success has-error");
$(ele).next("span").text(""); if("success"==status)
{
$(ele).parent().addClass("has-success");
$(ele).next("span").text(msg);
}else if("error"==status)
{
$(ele).parent().addClass("has-error");
$(ele).next("span").text(msg);
}
}
注意的几个细节：
1.采用函数插入页面元素
$("<tr></tr>").append(empIdTd).append(empNameTd).append(
GenderTd).append(EmailTd).append(deptNameTd).append(
btnTd).appendTo("#emps_table tbody");
2.append方法执行完以后还是返回原来的元素
3.采用Response获得json字符串，然后页面解析字符串
4.跳转页面采用to_page方法，里面依次执行三个方法，解析并显示员工数据，解析并显示分页信息，显示分页信息
5.返回的json字符串
6.前端页面的ajax发出请求，controller收到请求，并得到参数，转到service层的方法，service层调用mapper.java中的方法。该方法是mapper,.xml的声明，是现在mapper.xml里。
完整页面如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- web路径，
不以/开始的相对路径，找资源，以当前资源的路径为基准
以/开始的相对路径，找资源，以服务器的路径为标准
src一般为http：//localhost：3306/xiaofan，（项目名）
--> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <%-- <script type="text/javascript" src="${APP_PATH}/static/js/jquery.min.js"></script> --%>
<link
href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
rel="stylesheet">
<script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head> <!-- 员工添加的模态框--> <!-- Modal -->
<div class="modal fade" id="empAddmodal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">添加员工</h4>
</div>
<div class="modal-body"> <!-- 弹窗提示框显示的页面开始,Spring自动封装form提交对象，要求name和Bean中名字一样 -->
<form class="form-horizontal"> <div class="form-group">
<label class="col-sm-2 control-label">empName</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="empName_add"
placeholder="empName" name="workerName">
<span class="help-block"></span>
</div>
</div> <div class="form-group">
<label class="col-sm-2 control-label">email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email_add"
placeholder="email" name="workerEmail">
<span class="help-block"></span>
</div>
</div> <div class="form-group">
<label class="col-sm-2 control-label">gender</label>
<div class="col-sm-10">
<label class="radio-inline"> <input type="radio"
id="gender1_add" value="M" name="workerGender">
男
</label> <label class="radio-inline"> <input type="radio"
id="gender2_add" value="W" name="workerGender">
女
</label>
</div>
</div> <div class="form-group">
<label class="col-sm-2 control-label">deptName</label>
<div class="col-sm-10">
<!-- 部门提交ID ,可以通过ID，也可以通过modal寻找-->
<select class="form-control" name="dId" "> </select>
</div>
</div> </form>
</div>
<!-- 弹窗提示框显示的页面结束 --> <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
</div>
</div>
</div>
</div> <body font-size="12px"> <!-- 搭建显示页面 -->
<div class="container">
<!-- 标题 -->
<div class="row">
<div class="col-md-12">
<h1>SSM-CRUD</h1>
</div>
</div>
<!-- 按钮 -->
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary" id="emp_add_modal_bn">新增</button>
<button class="btn btn-danger">删除</button>
</div>
</div>
<!-- 显示表格信息 -->
<div class="row">
<div class="col-md-12">
<table class="table table-hover" id="emps_table">
<thead>
<tr>
<th>序号</th>
<th>Name</th>
<th>Gender</th>
<th>Email</th>
<th>deptName</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody> </table>
</div>
</div>
<!-- 显示分页信息-->
<div class="row">
<!-- 分页文字信息，6列-->
<div class="col-md-6" id="page_info_area"></div>
<!-- 分页条信息-->
<div class="col-md-6" id="page_nav_area"></div>
</div> </div> <script type="text/javascript"> var totalRecord;
//页面加载完成以后，发送一个ajax请求，得到分页数据
$(function() {
//去首页
to_page(1);
}); function to_page(pn) {
$.ajax({
url : "${APP_PATH}/emps",
data : "pn=" + pn,
type : "GET",
success : function(result) {
//console.log(result);
//1.解析并显示员工数据
build_workers_table(result); //2.解析并显示分页信息
build_page_info(result);
//3.显示分页条信息
build_page_nav(result); }
}); }
//1.解析并显示员工数据
function build_workers_table(result) {
//清空表格数据
$("#emps_table tbody").empty();
var emps = result.extend.pageInfo.list;
//jquery遍历方法each，emps第一个遍历的元素,item当前对象
$.each(emps, function(index, item) {
var empIdTd = $("<td></td>").append(item.workerId);
var empNameTd = $("<td></td>").append(item.workerName);
var GenderTd = $("<td></td>").append(item.workerGender == 'M' ? "男" : "女");
var EmailTd = $("<td></td>").append(item.workerEmail);
var deptNameTd = $("<td></td>").append(item.department.deptName);
var editBtn = $("<button></button>").addClass(
"btn btn-primary btn-sm").append(
$("<span></span>").addClass(
"glyphicon glyphicon-pencil")).append("编辑");
var delBth = $("<button></button>").addClass(
"btn btn-danger btn-sm").append(
$("<span></span>")
.addClass("glyphicon glyphicon-trash")).append(
"删除");
var btnTd = $("<td></td>").append(editBtn).append(" ").append(
delBth);
//append方法执行完以后还是返回原来的元素
$("<tr></tr>").append(empIdTd).append(empNameTd).append(
GenderTd).append(EmailTd).append(deptNameTd).append(
btnTd).appendTo("#emps_table tbody");
/* <button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-pencil " aria-hidden="true"></span>
编辑
</button> */ }); } //2.解析并显示分页信息,列出
function build_page_info(result) {
$("#page_info_area").empty();
$("#page_info_area").append(
"当前" + result.extend.pageInfo.pageNum + "页,总"
+ result.extend.pageInfo.pages + "页 ,总"
+ result.extend.pageInfo.total + "条记录");
totalRecord=result.extend.pageInfo.total;
}
//3.显示分页条信息,点击跳转下一页
/* <!-- 分页条信息-->
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="${APP_PATH }/emps?pn=1">首页</a></li>
<li><a href="${APP_PATH }/emps?pn=${pageInfo.pageNum-1}"
aria-label="Previous"> <span aria-hidden="true">«</span>
</a></li>
*/
function build_page_nav(result) {
//page_nav_area
$("#page_nav_area").empty();
var ul = $("<ul></ul>").addClass("pagination"); //构建元素
var firstPageli = $("<li></li>").append(
$("<a></a>").append("首页").attr("href", "#"));
var prePageli = $("<li></li>").append(
$("<a></a>").append("«"));
if (result.extend.pageInfo.hasPreviousPage == false) {
firstPageli.addClass("disabled");
prePageli.addClass("disabled");
} else {
//为元素添加点击事件
firstPageli.click(function() { to_page(1); });
prePageli.click(function() {
//当前页面减一
to_page(result.extend.pageInfo.pageNum - 1); }); } var nextPageli = $("<li></li>").append(
$("<a></a>").append("»"));
var lastPageli = $("<li></li>").append(
$("<a></a>").append("末页").attr("href", "#"));
if (result.extend.pageInfo.hasNextPage == false) {
nextPageli.addClass("disabled");
lastPageli.addClass("disabled");
} else {
nextPageli.click(function() {
//当前页面减一
to_page(result.extend.pageInfo.pageNum + 1); });
lastPageli.click(function() {
//当前页面减一
to_page(result.extend.pageInfo.pages); }); } //添加首页和前一页的提示
ul.append(firstPageli).append(prePageli);
//遍历页码号1，2，3
$.each(result.extend.pageInfo.navigatepageNums, function(index,
item) {
var numLi = $("<li></li>").append($("<a></a>").append(item));
if (result.extend.pageInfo.pageNum == item) {
numLi.addClass("active");
}
numLi.click(function() { to_page(item);
});
ul.append(numLi);
});
//添加下一页和末页的提示
ul.append(nextPageli).append(lastPageli);
//把url加入
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
} //点击新增按钮弹出模态框
$("#emp_add_modal_bn").click(function() {
//清空表单数据（表单重置）,取出form对象
$("#empAddmodal form")[0].reset();
//发送ajax请求，查出部门信息，显示在下拉列表中
getDepts();
//打开模态框，$("#id").modal
$("#empAddmodal").modal({
backdrop : "static"
}); });
//查出所有的部门信息并显示在下拉列表中 function getDepts() {
$.ajax({
url : "${APP_PATH}/depts",
type : "GET",
success : function(result) {
$.each(result.extend.depts,function() {
var optionEle = $("<option></option>").append(
this.deptName).attr("value", this.deptId);
optionEle.appendTo("#empAddmodal select");
}); }
});
} //校验表单数据 function validate_add_form() {
//1.拿到要校验的数据，使用正则表达式
var empName = $("#empName_add").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9fff]{2,5})/;
if (!regName.test(empName)) {
//alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");
//bootstrap校验，给父标签加上has-error
// $(ele).parent().addClass("has-error");
// $(ele).next("span").text(msg);
show_validate_msg("#empName_add","error","用户名可以是2-5位中文或者6-16位英文和数字的组合"); return flase;
}else{ show_validate_msg("#empName_add","success",""); }
//2.检验邮箱 var email = $("#email_add").val();
var regemail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if (!regemail.test(email)) {
//alert("邮箱格式不正确");
//应该清空这个元素之前的样式
//$("#email_add").parent().addClass("has-error");
//$("#email_add").next("span").text("邮箱格式不正确");
show_validate_msg("#email_add","error","邮箱格式不正确");
return flase;
} else {
//$("#email_add").parent().addClass("has-success");
//$("#empName_add").next("span").text("邮箱格式不正确"); show_validate_msg("#email_add","success","");
}
return true;
} //显示校验结果的提示信息，抽象成方法
function show_validate_msg(ele,status,msg){
//清除当前元素的校验状态
$(ele).parent().removeClass("has-success has-error");
$(ele).next("span").text(""); if("success"==status)
{
$(ele).parent().addClass("has-success");
$(ele).next("span").text(msg);
}else if("error"==status)
{
$(ele).parent().addClass("has-error");
$(ele).next("span").text(msg);
}
} $("#empName_add").change(function(){
//发送ajax请求检验用户名是否可用
var empName=this.value;
$.ajax({
url:"${APP_PATH}/checkuser",
data:"empName="+empName,
type:"POST",
success:function(result){
if(result.code==100)
{//result为MSG
show_validate_msg("#empName_add","success","用户名可用");
$("#emp_save_btn").attr("ajax-va","success");
}
else{
show_validate_msg("#empName_add","error","用户名不可用");
$("#emp_save_btn").attr("ajax-va","error");
}
}
}); }); //点击保存，保存员工 $("#emp_save_btn").click(function() {
//1.模态框的表单数据提交给服务器进行保存
//先对要提交给服务器的数据进行校验
if (!validate_add_form()) {
return false;
};
//判断用户名是否成功
if ($(this).attr("ajax-va") == "error") {
return false;
}
//2.发送ajax请求保存员工,serialize表示序列化方法,将填入数据序列化
//$("#empAddmodal form").serialize();
//添加数据后，跳转到最后一页
$.ajax({
url : "${APP_PATH}/emp",
type : "POST",
data : $("#empAddmodal form").serialize(),
success : function(result) {
//alert(result.msg);
//当员工保存工作
//1.关闭模态框
$("#empAddmodal").modal('hide');
//2.来到最后一页，显示刚才保存的数据
//发送ajax请求显示最后一页数据即可,总记录数肯定大于页数
to_page(totalRecord);
}
}); });
</script>
</body>
</html>
SSM框架中前端页面（AJAX+Jquery+spring mvc+bootstrap）的更多相关文章
- SSM框架中，利用ajax，jQuery，json动态刷新局部页面，实现用户名查重提示
1.在applicationContext.xml配置json文件 2.jsp页面 3.js语句 js语句在script标签中使用, 4.控制层 5.逻辑处理层 6.Dao层方法 7.Mapping层 ...
- SSM框架中的前后端分离
认识前后端分离 在传统的web应用开发中,大多数的程序员会将浏览器作为前后端的分界线.将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码统称为后端. ...
- SSM框架中，controller的action返回参数给vue.js
在SSM框架中,controller的action中,返回的是视图,即jsp页面或是ModelAndView,若是通过axios给vue传值的话,需要转换为字符串或是user实体类对象. 使用@Res ...
- 基于IntelliJ IDEA开发工具搭建SSM框架并实现页面登录功能详细讲解二
接: 接下来配置类 UserController package com.chatRotbot.controller; import com.chatRotbot.model.User; import ...
- maven springMVC SSM框架中 出现的406 (Not Acceptable)
首先,需要清楚,http state 406代表什么意思: 406是HTTP协议状态码的一种,表示无法使用请求的特性来响应请求的网页.一般指客户端浏览器不接受所请求页面的MIME类型. 出现这样的错误 ...
- 在SSM框架中我设置拦截器filter不能通过注解获取到实现类
我在用注解注入实现类的时候,出现了这样的错误:如以下截图: 这个地方报出的错误是说明我的一个接口类型的类没有获取到,后来我就想要是我的实现类没有获取到那么我就直接new一个实现类然后再进行调用就会出现 ...
- 网站建设中前端常用的jQuery+easing缓动的动画
网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...
- JAVA使用log4j（另SSM框架中使用log4j）
1.引入jar包 log4j-1.2.13.jar 2.src下建立配置文件:log4j.properties #不+All,只写后一种LOG log4j.rootLogger =ALL,system ...
- SSM框架中数据库无法连接的问题
首先是SSM框架中所有的配置都是没有问题的,而且项目在其他人的环境上也能正常访问数据库:那么最有可能的就是数据库版本的问题导致数据库连接不上,服务器给我的报错是: 15:37:25.902 [C3P0 ...
随机推荐
- sspanelv3魔改版邮件设置指南及常用配置
要进行SSpanel v3魔改版邮件设置,需要在设置文件(位于config/.config.php下)中修改两处内容: 1.设置发送邮件的方式 $System_Config['enable_email ...
- Myeclipse插件快速生成ssh项目并配置注解 在action层注入service的超详细过程
最近发现,我对于ssh的 自动注入配置 还是不熟悉,于是整理了一下 终于做了一个 简单的 注入配置出来. 以前都是在applicationContext.xml 里面这样配 <bean id=& ...
- css学习の第二弹—文字格式化排版
1.css格式化排版 >>字体设计: etc:body{font-family:"Microsoft Yahei";} >>字号,颜色: etc:body{ ...
- 图像实验室 website 项目日志
day 1 1.问题: 在演示界面选择浏览本地图片,上传以后不显示上传图片 原因:PIL库没有装好,参见之前博客重装 2.问题: 可以上传图片并在网站上显示,但是不能得到运行结果的图片. 原因:没有将 ...
- VM及centOS系统安装
虚拟机安装linux及配置
- python web开发-flask访问请求数据request
Request对象在web应用的开发中是一个非常重要的对象,主要用来获取用户发来的请求数据. 常用属性参考:http://docs.jinkan.org/docs/flask/api.html#fla ...
- route路由的顺序问题了数据包的转发流程
2018-02-28 15:29:26 [root@linux ~]# routeKernel IP routing tableDestination Gateway ...
- 需掌握 - JAVA算法编程题50题及答案
[程序1] 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? //这是一个菲波拉契数列问题publi ...
- push_back和emplace_back的区别
emplace_back能就地通过参数构造对象,不需要拷贝或者移动内存,相比push_back能更好地避免内存的拷贝与移动,使容器插入元素的性能得到进一步提升.在大多数情况下应该优先使用emplace ...
- Android GC Log
最近在研究Android内存垃圾回收的内容,遇到一些自己之前不知道的技巧和方法.现在分享一种简单的在Logcat中可以看到垃圾回收状态的方法.经常关注Logcat日志的童鞋偶尔会看到一条类似于以下形式 ...