【J2EE】ajax實作頁面無重新整理完成crud操作

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().attr('deptno');
                    $('#updateSele').val($value);
                    $('#empno').val($tr.children('td').eq().text());
                    $('#ename').val($tr.children('td').eq().text());
                    $('#job').val($tr.children('td').eq().text());
                    $('#sal').val($tr.children('td').eq().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下載下傳

【J2EE】ajax實作頁面無重新整理完成crud操作

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條