4月30日 RIA 周一

JSP页面教师信息增删改查

最新推荐文章于 2024-06-21 09:34:49 发布

原创最新推荐文章于 2024-06-21 09:34:49 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

2018 专栏收录该内容

337 篇文章

订阅专栏

本文介绍了一个使用JSP技术实现的教师信息管理页面案例，包括教师信息的添加与更新功能。通过Ajax技术动态加载部门下拉列表，并利用jQuery Validate插件进行表单验证，确保输入数据的有效性。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'add.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

  <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  <script type="text/javascript" src="js/jquery.validate.js"></script>
    <script type="text/javascript">
    $(function (){
        //使用ajax实现部门下拉
        $.ajax({
            url:"teacher?m=dept",
            type:"post",
            dataType:"json",
            success:function (msg){
                for(var i in msg){
                    $("#s1").append("<option value="+msg[i].id+">"+msg[i].dept_name+"</option>");
                }
            }
        });
        //-----------------使用validate控件验证添加------------------
        $("#for").validate({
            rules:{
                id:{required:true},
                tname:{required:true},
                tage:{required:true},
                tsex:{required:true},
                thobby:{required:true}
            },
            messages:{
                id:"必须输入",
                tname:"必须输入",
                tage:"必须输入",
                tsex:"必须输入",
                thobby:"必须输入"
            },
            submitHandler:function(){
                $.ajax({
                    url:"teacher?m=add",
                    type:"post",
                    data:$("#for").serialize(),
                    dataType:"text",
                    success:function (msg){
                        if(msg>0){
                            alert("添加成功");
                            location="teacher?m=list";
                        }else{
                            alert("添加失败");
                            location.reload();
                        }
                    }
                });
            }
        });
    });

    </script>
  </head>

  <body>
  <form id="for">
    id:<input type="text" name="id"><br>
    tname:<input type="text" name="tname"><br>
    tage:<input type="text" name="tage"><br>
    tsex:<input type="radio" name="tsex" value="男">男
    <input type="radio" name="tsex" value="女">女<br>
    thobby:<input type="checkbox" name="thobby" value="唱歌">唱歌
    <input type="checkbox" name="thobby" value="跳舞">跳舞
    <input type="checkbox" name="thobby" value="骑马">骑马
    <input type="checkbox" name="thobby" value="游泳">游泳<br>
    dept_name:
        <select name="dept_name" id="s1">

        </select>
    <br>
    <input type="submit" value="添加">
  </form>
  </body>
</html>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'upd.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

  <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  <script type="text/javascript" src="js/jquery.validate.js"></script>
  <script type="text/javascript">
    var id = ${param.id};
    $(function (){
        //使用ajax实现部门下拉
        $.ajax({
            url:"teacher?m=dept",
            type:"post",
            dataType:"json",
            success:function (msg){
                for(var i in msg){
                    $("#s1").append("<option value="+msg[i].id+">"+msg[i].dept_name+"</option>");
                }
            }
        });
        //ajax回显
        $.ajax({
            url:"teacher?m=show",
            data:{id:id},
            type:"post",
            dataType:"json",
            success:function(msg){
                $("#id").val(msg.id);
                $("#tname").val(msg.tname);
                $("#tage").val(msg.tage);
                $("[value="+msg.tsex+"]").attr("checked",true);
                var hob = msg.thobby;
                var va = hob.split(",");
                for(var i in va){
                    $("[value="+va[i]+"]").attr("checked",true);
                }
                $("#s1").val(msg.dept_id);
            }
        });
    });
    function update(){
        $.ajax({
            url:"teacher?m=update",
            type:"post",
            data:$("#for").serialize(),
            dataType:"text",
            success:function(msg){
                if(msg>0){
                    alert("修改成功");
                    location="teacher?m=list";
                }else{
                    alert("修改失败");
                    location.reload();
                }
            }
        });
    }
  </script>
  </head>

  <body>
    <form id="for">
    id:<input type="hidden" name="id" id="id"><br>
    tname:<input type="text" name="tname" id="tname"><br>
    tage:<input type="text" name="tage" id="tage"><br>
    tsex:<input type="radio" name="tsex" value="男" id="sex">男
    <input type="radio" name="tsex" value="女" id="sex">女<br>
    thobby:<input type="checkbox" name="thobby" value="唱歌">唱歌
    <input type="checkbox" name="thobby" value="跳舞">跳舞
    <input type="checkbox" name="thobby" value="骑马">骑马
    <input type="checkbox" name="thobby" value="游泳">游泳<br>
    dept_name:
        <select name="dept_name" id="s1">

        </select>
    <br>
  </form>
    <input type="button" value="修改" onclick="update()">
  </body>
</html>