jsp更新页面操作

最新推荐文章于 2021-01-27 03:09:23 发布

原创最新推荐文章于 2021-01-27 03:09:23 发布 · 2.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#jsp更新页面 #模态框更新

jsp/servlet学习专栏收录该内容

15 篇文章

订阅专栏

一、模态框形式更新员工:可以参考bootstrap,inspinia。

（1）copy模态框相关代码进来
（2）content部分放到另一个页面
（3）超链接上加三个属性，只能点关闭才能关闭：data：static
传入empno，
（4）写一个方法：
（a）先将模态框内容清除，
（b）再ajax请求将目标管理页面的HTML载入到模态框的content部分，响应回来的内容填入其中。

1.按编号查找员工

select * from employee where empno=?
EmployeeDao.java:

/**
     * 4.通过主键查询员工
     * @param empno
     * @return
     */
    public Employee findByPk(Integer empno) {
        String sql="select * from employee where empno=?";

        try (Connection conn = JdbcUtil.getConnection();
             PreparedStatement ps = conn.prepareStatement(sql)
        ) {
            ps.setInt(1,empno);
            ResultSet rs = ps.executeQuery();
            Employee employee = new ResultSetHandler<Employee>().toBean(rs, Employee.class);
            return employee;

        } catch (SQLException e) {
        }
        return null;
    }

我们需要更新此行：
在这里插入图片描述

2.将表单加入到模态框中显示，查询显示需要更新的数据

<a class="btn btn-xs btn-danger" data-toggle="modal" data-target="#updateEmp" data-backdrop="static" href="" onclick="update(<%=e.getEmpno()%>)"><span class="glyphicon glyphicon-refresh"></span>更新</a>

function update(emp_no) {

            // 在加入表单到模态框前先清除模态框内之前的表单
            $('#updateEmp .modal-content').empty();

            $.get('updateForm.jsp',{empno: emp_no},function (res) {
                $('#updateEmp .modal-content').append(res);
            })
        }

3.表单中将请求数据取出显示

<%
    String empno = request.getParameter("empno");
    if (StringUtils.isNotBlank(empno)){
        Employee employee = new EmployeeDao().findByPk(Integer.valueOf(empno));
        // el表达式
        pageContext.setAttribute("emp",employee);
    }

%>
<form class="form-horizontal" action="doQueryForm.jsp" method="post" id="updateEmployee">
    <input type="hidden" name="empno" value="${emp.empno}" />
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">更新</h4>
    </div>
    <div class="modal-body">
            <div class="form-group">
                <label for="empno" class="col-sm-2 control-label">员工编号</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="empno" disabled value="${emp.empno}" />
                </div>
            </div>
            <div class="form-group">
                <label for="ename" class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                    <input type="text" name="ename" class="form-control" id="ename"  value="${emp.ename}" required/>
                </div>
            </div>
            <div class="form-group">
                <label for="inputJob" class="col-sm-2 control-label">工作</label>
                <div class="col-sm-10">
                    <input type="text" name="job" class="form-control" id="inputJob" value="${emp.job}" required/>
                </div>
            </div>
            <div class="form-group">
                <label for="mgr" class="col-sm-2 control-label">经理</label>
                <div class="col-sm-10">
                    <input type="text" name="mgr" class="form-control" id="mgr" value="${emp.mgr}" required/>
                </div>
            </div>
            <div class="form-group">
                <label for="inputHiredate" class="col-sm-2 control-label">入职日期</label>
                <div class="col-sm-10">
                    <input type="date" name="hiredate" class="form-control" id="inputHiredate" value="${emp.hiredate}"/>
                </div>
            </div>
            <div class="form-group">
                <label for="inputSal" class="col-sm-2 control-label">工资</label>
                <div class="col-sm-10">
                    <input type="text" name="sal" class="form-control" id="inputSal" value="${emp.sal}" required/>
                </div>
            </div>
            <div class="form-group">
                <label for="inputComm" class="col-sm-2 control-label">奖金</label>
                <div class="col-sm-10">
                    <input type="text" name="comm" class="form-control" id="inputComm" value="${emp.comm}"/>
                </div>
            </div>
            <div class="form-group">
                <label for="deptno" class="col-sm-2 control-label">部门</label>
                <div class="col-sm-10">
                    <select name="deptno" class="form-control" id="deptno" required>
                        <option value="10" ${emp.deptno eq 10? "selected":""}>ACCOUNTING</option>
                        <option value="20" ${emp.deptno eq 20?"selected":""}>RESEARCH</option>
                        <option value="30" ${emp.deptno eq 30?"selected":""}>SALES</option>
                        <option value="40" ${emp.deptno eq 40?"selected":""}>OPERATIONS</option>
                    </select>
                </div>
            </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" onclick="updateSave(${emp.empno})">保存</button>
    </div>
</form>

运行结果：
在这里插入图片描述

4.点击保存

<button type="button" class="btn btn-primary" onclick="updateSave(${emp.empno})">保存</button>

添加一个onclick()事件跳到updateSave()方法执行更新操作。
updateSave()：

		 // 更新保存
        function updateSave(empno) {
            //console.log("123");
            // 序列化表单，将表单输入框的值封装成：empno=7369&ename=SMITH&job=CLERK&job=7902&hiredate=1980-12-17&sal=5900.0&comm=100.0&deptno=20
            var data = $('#updateEmployee').serialize();
            //console.log(data);
            $.post('doUpdate.jsp',data,function (res) {
                if (res.result){
                    //console.log(res.result);

                    // 手动关闭模态框
                    $('#updateEmp').modal('hide');
                    $('#updateEmp .modal-content').empty();
                        swal({
                            title: "更新员工",
                            text: "更新"+empno+"的员工信息成功",
                            type: "success"
                        },function () {
                            location.reload();
                        });

                } else {
                        swal({
                            title: "更新员工",
                            text: "更新"+empno+"的员工信息失败，请重新检查",
                            type:"error"
                        });
                }
            },'json')

运行结果：
在这里插入图片描述
最后我们发现更新员工成功

5.补充el表达式

（1）el表达式只能访问通过pageContext(页面作用域，当前页面)|request（请求）,session（会话，第一次访问系统，一直与系统进行交互都属于一个对话，在一个浏览器中）,application(全局),setAttribute(key，Object)存入的数据：将数据存入页面作用域对象中、请求作用域中、会话作用域、全局作用域。
（2）value=" ${pageScope.emp.ename}":.ename会反射去调用getEname()方法（3）el作用域大小自动搜索对象 pageContext-->request-->session -->application 若有两个相同名字的不同作用域，会先自动搜索到小作用域. （4）注意：name="ename":请求参数，value:输入框显示的值， disabled在表单提交时不会提交，必须要加一个隐藏字段： <input type="hidden" name="empno" value="$ {emp.empno}">