【J2EE】ajax实现页面无刷新完成crud操作

来源：互联网发布：算法统宗中的所有题目编辑：程序博客网时间：2024/06/05 06:54

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">                    &times;                </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">                    &times;                </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>&nbsp&nbsp员工信息列表</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>  &nbsp&nbsp&nbsp&nbsp  <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下载

0 0