0.首先还是按照惯例,上效果图(no picture, no …)
可以看到使用ajax异步的方式去做crud操作时,整个页面是没有刷新的(参考左上角的刷新按钮),这种体验更像是C/S架构
1.AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)——用于创建更好更快以及 交互性 更强的Web应用程序的技术。
2.页面代码 emp_list.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC >
<html>
<head>
<title>ajax emp system</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="container">
<!-- 模态框(Modal)添加框 -->
<div></div>
<div class="modal fade" id="modalAddEmp" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
添加员工
</h4>
</div>
<div class="modal-body">
<form id="form_add" class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="emp.ename" placeholder="请输入员工姓名">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">职业</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="emp.job" placeholder="请输入员工职业">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">薪水</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="emp.sal" placeholder="请输入员工薪水">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">选择部门</label>
<div class="col-sm-10">
<select id="addSele" class="form-control" name="emp.dept.deptno">
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="btnadd" type="button" class="btn btn-primary" data-dismiss="modal">确认添加</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
<!-- 模态框(Modal)修改框 -->
<div>
<div class="modal fade" id="modalUpdateEmp" tabindex="-2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
修改员工
</h4>
</div>
<div class="modal-body">
<form id="form_update" class="form-horizontal" role="form">
<input type="text" id ="empno" name="emp.empno" "
hidden="hidden">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" id="ename" class="form-control" name="emp.ename" placeholder="请输入员工姓名">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">职业</label>
<div class="col-sm-10">
<input type="text" id="job" class="form-control" name="emp.job" placeholder="请输入员工职业">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">薪水</label>
<div class="col-sm-10">
<input type="text" id="sal" class="form-control" name="emp.sal" placeholder="请输入员工薪水">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">选择部门</label>
<div class="col-sm-10">
<select id="updateSele" class="form-control" name="emp.dept.deptno">
<s:iterator value="listDept" var="dept">
<option value="<s:property value=" #dept.deptno "/>"><s:property value="#dept.dname" /></option>
</s:iterator>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="btnupdate" type="button" class="btn btn-primary" data-dismiss="modal">确认修改</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
</div>
<!--
${pageContext.request.contextPath}/emp_toadd
-->
<a id="btnAdd" class="btn btn-default btn-lg " data-toggle="modal" data-target="#modalAddEmp">添加员工</a>
<table class="table table-hover" id="tbl">
<caption>  员工信息列表</caption>
<thead>
<tr>
<th>员工编号</th>
<th>员工姓名</th>
<th>职业</th>
<th>部门</th>
<th>工资</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
var url_delemp = '${pageContext.request.contextPath}/emp_delAjax?emp.empno';
var url_getemp = '${pageContext.request.contextPath}/emp_getAjax?emp.empno';
var url_addemp = '${pageContext.request.contextPath}/emp_addAjax';
var url_updateemp = '${pageContext.request.contextPath}/emp_updateAjax';
var url_getemplist = '${pageContext.request.contextPath}/emp_listAjax';
var url_getdeptlist = '${pageContext.request.contextPath}/dept_listAjax';
$(function() {
refreshEmpList();
bindEven();
});
window.onload=function(){
getDeptList();
}
//获取部门列表
function getDeptList(){
$.getJSON(url_getdeptlist,function(data,status){
$adds = $('#addSele');
$upds = $('#updateSele');
$adds.html('');
$upds.html('');
$.each(data.list, function(index,d) {
$adds.append('<option value ="'+ d.deptno + '">' + d.dname +
'</option>');
$upds.append('<option value ="'+ d.deptno + '">' + d.dname +
'</option>');
});
});
}
//绑定事件
function bindEven() {
$('table').on('click', '#btnDel', function() {
if(confirm('真的要删除吗?')) {
//异步删除
delEmp($(this).attr('value'));
}
});
$('table').on('click', '#btnModif', function() {
//先show出修改的模态层,并将查到的数据加进去
$tr = $(this).parent().parent();
var $value = $tr.children('td').eq(3).attr('deptno');
$('#updateSele').val($value);
$('#empno').val($tr.children('td').eq(0).text());
$('#ename').val($tr.children('td').eq(1).text());
$('#job').val($tr.children('td').eq(2).text());
$('#sal').val($tr.children('td').eq(4).text());
console.log($('#updateSele').val());
});
$('#btnadd').on('click', function() {
$res = $('#form_add').serialize();
$.ajax({
url: url_addemp,
type: "POST", //GET或POST,
data: $res,
success: function(data) {
refreshEmpList();
}
});
});
$('#btnupdate').on('click', function() {
$res = $('#form_update').serialize();
$.ajax({
url: url_updateemp,
type: 'post',
data: $res,
success: function(data) {
refreshEmpList();
}
});
});
}
//删除员工
function delEmp(empno) {
console.log('empno:' + empno);
$.getJSON(url_delemp + "=" + empno, function(data, status) {
console.log(data);
//刷新列表
refreshEmpList();
});
}
//刷新列表
function refreshEmpList() {
//异步刷新
$.getJSON(url_getemplist, function(data, status) {
console.log(data);
//刷新列表
$tb = $('#tbody');
$tb.html('');
$.each(data.list, function(index,data) {
$tb.append('<tr><td>'+data.empno+'</td>'+
'<td>'+data.ename+'</td>'+
'<td>'+data.job+'</td>'+
'<td deptno ='+data.dept.deptno+'>'+data.dept.dname+'</td>'+
'<td>'+data.sal+'</td>'+
'<td><a id="btnDel" value="'+data.empno+'">删除</a>      <a id="btnModif" data-toggle="modal" data-target="#modalUpdateEmp">修改</a></td></tr>');
});
});
}
</script>
</body>
</html>
3.服务器数据支持代码 EmpAction.java
@Controller
@Scope("prototype")
@ParentPackage("json-default")
public class EmpAction extends ActionSupport{
private Emp emp;
private List<Emp> list;
@Autowired EmpService empService;
@Action(value= "/emp_listAjax",results={
@Result(name="success",type="json", params = { "includeProperties",
"^list\\[\\d+\\]\\.empno,^list\\[\\d+\\]\\.ename,^list\\[\\d+\\]\\.job,^list\\[\\d+\\]\\.hiredate,^list\\[\\d+\\]\\.sal,^list\\[\\d+\\]\\.dept,^list\\[\\d+\\]\\.dept.dname,^list\\[\\d+\\]\\.dept.deptno" })
})
public String listAjax(){
list = empService.getAll();
return SUCCESS;
}
@Action(value = "/emp_delAjax",results={
@Result(name = "success",type ="json",params = { "includeProperties","^emp.empno,^emp.ename" })
})
public String delAjax(){
emp = empService.find(emp);
empService.del(emp);
return SUCCESS;
}
@Action(value = "/emp_addAjax")
public String addAjax(){
empService.add(emp);
return null;
}
@Action(value = "/emp_updateAjax")
public String updateAjax(){
empService.update(emp);
return null;
}
}
DeptAction.java
@Controller
@Scope("prototype")
@ParentPackage("json-default")
public class DeptAction extends ActionSupport{
private List<Dept> list;
@Autowired DeptService deptService;
@Action(value= "/dept_listAjax",results={
@Result(name="success",type="json")
})
public String listAjax(){
list = deptService.getAll();
return "success";
}
}
4.解决的问题
(a)bootstrap 多个(大于2个)模态框 在页面上谁都显示不出来问题
这种情况只需要在模态框的div外层各套一个div即可
(b)在struts2的Action中使用JSON数据格式来传值
首先我们的Action类的父包配置为json-default,即在Action类头部注解上@ParentPackage(“json-default”) 然后指定@Result 的type属性为json 最后使用正则的方式表明你想要获得的数据 eg: params = { “includeProperties”,”^emp.empno,^emp.ename” }
5.附录一些常用的jQuery代码
(a)AJAX请求
$(function() {
$('#btnSend').click(function() {
$.ajax({
type: "GET", //GET或POST,
async:true, //默认设置为true,所有请求均为异步请求。
url: "${pageContext.request.contextPath}/dept_listAjax",
data: {
username: $("#username").val(),
content: $("#content").val()
},
dataType: "json", //xml、html、script、jsonp、text
beforeSend:function(){},
complete:function(){},
success: function(data) {
alert(data)
}
error:function(){},
});
});
});
(b)获取checkbox,并判断是否选中
$("input[type='checkbox']").is(':checked')
//返回结果:选中=true,未选中=false
(c)获取checkbox选中的值
var chk_value =[];
$('input[name="test"]:checked').each(function(){
chk_value.push($(this).val());
});
6.Demo下载