这里只展示主要功能页面，不对其他页面进行展示,并且忽略掉CSS
<!-- index.jsp --> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> 此处省略 </style> </head> <body> <div class="login"> <div class="content clearfix"> <div class="content-left"> <div class="logo"> <img src="../static/images/logo.png" alt="" /> <p>XXXX就业管理系统</p> </div> </div> <form action="login" method="post"> <div class="shu"></div> <div class="content-right"> <div class="login-form"> <h2>用户登录/LOGIN</h2> <div class="identifire"> <span>身 份：</span> <select name="roleId"> <option value="1" selected="selected">学生</option> <option value="2">教师教辅人员</option> </select> </div> <div class="account clearfix"> <span>账 号：</span> <input type="text" value="" name="account" /> </div> <div class="password clearfix"> <span>密 码：</span> <input type="password" value="" name="password" /> </div> <div class="code clearfix"> <span>验证码：</span> <input type="text" value="" name="vcode" /> <em> <img alt="" src="../vcode.png" height="35px" width="120px" id="refresh_vcode"> </em> </div> <div class="btn"> <span><input type="submit" value="登录" id="login"></span> <span class="forget"><a href="password.html">忘记密码</a></span> </div> <span style="color: red;font-size:18px;margin-left:48px;">${msg }</span> </div> </div> </form> </div> </div> <script> $('#refresh_vcode').on('click', ()=>{ $('#refresh_vcode').attr('src', '../vcode.png?'+Math.random()); }) </script> <!--<script type="text/javascript"> $(document).ready(function(){ if (window.PIE) { $('.rounded').each(function() { PIE.attach(this); }); } }); </script>--> </body> </html> <!-- TeacherPersonalInfo.jsp --> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/TeacherPersonalInfo.css"> </head> <body> <div class="container flgure"> <div class="content"> <ul class="clearfix info"> <li class="active">基础信息</li> </ul> <div class="basic"> <a id="emit" href="javascript:;">编辑</a> <a id="keep" href="javascript:;">保存</a> <div class="select active"> <div class="left fl"> <div> <label for="">姓 名：</label> <input type="text" value="${teacherinfo.subject }" id="subject" disabled> </div> <div> <label for="">性 别：</label> <c:if test="${teacherinfo.gender eq 1 }"> 男：<input type="radio" id="gender" value="1" style="width: 20px; margin-top: 12px;" checked> 女：<input type="radio" id="gender" value="2" style="width: 20px;"> </c:if> <c:if test="${teacherinfo.gender eq 2 }"> 男：<input type="radio" id="gender" value="1" style="width: 20px; margin-top: 12px;"> 女：<input type="radio" id="gender" value="2" style="width: 20px;" checked> </c:if> </div> <div> <label for="">出生日期：</label> <input type="text" value="${teacherinfo.birth }" id="birth" disabled> </div> <div> <label for="">身份证号：</label> <input type="text" value="${teacherinfo.identify }" id="identify" disabled> </div> <div> <label for="">工 号：</label> <input type="text" value="${teacherinfo.account }" id="account" disabled> </div> <div> <label for="">民 族：</label> <input type="text" value="${teacherinfo.nation }" id="nation" disabled> </div> <div class="label"> <label for="">政治面貌：</label> <input type="text" value="${teacherinfo.politics }" id="politics" disabled> </div> <div class="label"> <label for="">教师等级：</label> <input type="text" value="${teacherinfo.degree }" id="degree" disabled> </div> </div> <div class="right fr"> <div class="label"> <label for="">手机号码：</label> <input type="number" value="${teacherinfo.tel }" id="tel" disabled> </div> <div> <label for="">QQ号码：</label> <input type="number" value="${teacherinfo.qq }" id="qq" disabled> </div> <div class="label"> <label for="">电子邮箱：</label> <input type="email" value="${teacherinfo.email }" id="email" disabled> </div> <div class="label"> <label>家庭地址</label> : <textarea rows="3" cols="20" id="address" style="width: 200px;">${teacherinfo.address }</textarea> </div> </div> </div> </div> </div> </div> <script src="js/jquery-1.9.1.min.js"></script> <script> $('#emit').on('click',function(){ $('input').removeAttr('disabled'); }); $('#keep').on('click',function(){ $('input').attr('disabled','disabled'); var obj = { subject: $('#subject').val(), gender: $('#gender').val(), birth: $('#birth').val(), identify: $('#identify').val(), account: $('#account').val(), nation: $('#nation').val(), politics: $('#politics').val(), degree: $('#degree').val(), address: $('#address').val(), tel: $('#tel').val(), email: $('#email').val(), qq: $('#qq').val() }; $.ajax({ url: 'teacherinfo', type: 'POST', data: {info : JSON.stringify(obj)}, success: ()=>{ alert('保存成功') } }) }); </script> </body> <!-- student.jsp --> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/student.css"> <script src="js/jquery-1.9.1.min.js"></script> </head> <body> <div class="container"> <div class="content"> <div class="header clearfix"> <div class="top fl">当前位置>个人信息</div> <div class="bottom fr"> <a id="emit" href="javascript:;">编辑</a> <a id="keep" href="javascript:;">保存</a> </div> </div> <div class="main"> <!--基础信息--> <div class="BasicInformation"> <div class="title"> 基础信息 </div> </div> <div class="content clearfix"> <div class="left fl"> <div> <label for="">姓名：</label> <input id="name" type="text" value="${studentinfo.name }" disabled /> </div> <div> <label for="">性别：</label> <c:if test="${studentinfo.gender eq 1 }"> 男：<input type="radio" id="gender" value="1" style="width: 20px; margin-top: 12px;" checked> 女：<input type="radio" id="gender" value="2" style="width: 20px;"> </c:if> <c:if test="${studentinfo.gender eq 2 }"> 男：<input type="radio" id="gender" value="1" style="width: 20px; margin-top: 12px;"> 女：<input type="radio" id="gender" value="2" style="width: 20px;" checked> </c:if> </div> <div> <label for="">出生日期：</label> <input id="birth" type="text" value="${studentinfo.birth }" placeholder="日期格式:yyyy-MM-dd" disabled> </div> <div> <label for="">身份证号：</label> <input id="identification" class="id oInp" type="text" value="${studentinfo.identification }" disabled> </div> </div> <div class="right fr"> <div> <label for="">学号：</label> <input id="account" type="number" value="${studentinfo.account }" disabled> </div> <div> <label for="">民族：</label> <input id="nation" type="text" value="${studentinfo.nation }" disabled> </div> <div class="label"> <label for="">政治面貌：</label> <div class="option clearfix" id="politics"> <a id="pl_name" href="javascript:;" class="fl" > ${studentinfo.politics } </a> <i class="fr"></i> <ul> <li>中共党员</li> <li>中共预备党员</li> <li>共青团员</li> <li>群众</li> <li>无党派人士</li> </ul> </div> </div> </div> </div> <!--联系方式--> <div class="BasicInformation"> <div class="title">联系方式</div> </div> <div class="content clearfix"> <div class="left fl"> <div> <label for="">手机号码：</label> <input id="tel" type="number" value="${studentinfo.tel }" disabled> </div> <div> <label for="">QQ号码：</label> <input id="qq" type="number" value="${studentinfo.qq }" disabled> </div> </div> <div class="right fr"> <div>account <label for="">电子邮箱：</label> <input id="email" type="text" value="${studentinfo.email }" class="mailbox" disabled> </div> </div> </div> <!--辅导员信息--> <div class="BasicInformation"> <div class="title"> 辅导员信息 </div> </div> <div class="content clearfix"> <div class="left fl"> <div> <label for="">姓名：</label> <input type="text" value="${studentinfo.name }"> </div> </div> <div class="right fr"> <div> <label for="">电话号码：</label> <input type="number" value="${studentinfo.tel }"> </div> </div> </div> </div> </div> </div> <script> $('#politics i').on('click', function() { $(this).siblings('ul').show(); }); $('#politics ul li').on('click', function() { var selTxt = $(this).text(); $('#politics a').text(selTxt); $('#politics ul').hide(); }); $('#child i').on('click', function() { $(this).siblings('ul').show(); }); $('#child ul li').on('click', function() { var selTxt = $(this).text(); $('#child a').text(selTxt); $('#child ul').hide(); }); $('#emit').on('click',function(){ $('input').removeAttr('disabled'); }); $('#keep').on('click',function(){ $('input').attr('disabled','disabled'); var obj = { name: $('#name').val(), gender: $('#gender').val(), birth: $('#birth').val(), identification: $('#identification').val(), account: $('#account').val(), nation: $('#nation').val(), politics: $('#pl_name').text(), tel: $('#tel').val(), qq: $('#qq').val(), email: $('#email').val() }; $.ajax({ url: 'studentinfo', type: 'POST', data: {info : JSON.stringify(obj)}, success: ()=>{ alert('保存成功') } }) }); /* $(document).ready(function(){ $.ajax({ url: "http://101.201.154.205:9090/bm/bmList", type: 'post', data: { t: Math.random() }, dataType: 'jsonp', 'jsonp': 'callback' }).then(function(res){ console.log(res) // var stu_name = $('#stu_name').val(); for (var i=0; i<res.length; i++) { $('#stu_name').attr('value',res[i].stu_name); $('#sex').attr('value',res[i].sex); $('#xstu_id').attr('value',res[i].xstu_id); $('#idNumber').attr('value',res[i].idNumber); $('#birthday').attr('value',res[i].birthday); $('#national_name').attr('value',res[i].national_name); $('#qq').attr('value',res[i].qq); $('#phone').attr('value',res[i].phone); $('#e_mail').attr('value',res[i].e_mail); $('#pl_name').text(res[i].pl_name); } },function(){ console.log('error'); }); }); */ </script> </body> <!-- search.jsp --> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/search.css"> <style type="text/css"> a{ pointer:cursor; } li{ border-bottom: 0.2px solid black; margin:auto; } </style> </head> <body> <div class="container"> <div class="search-content content clearfix"> <div class="search-bar clearfix "> <div class="bar-content clearfix fl"> <input type="text" value="" class="fr" id='keyword'/> </div> <a id="search" class="search-font fr">搜索</a> <div class="word fl">建议搜索词汇</div> <div class="list fl "> <ul class="clearfix"> <li>学号</li> <li>姓名</li> </ul> </div> </div> </div> <hr> 检索到[<span style="color: blue" id="size"></span>]条数据:<hr> <ul id="content" class="clearfix"> </ul> </div> <script src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $('#search').on('click',()=>{ $.ajax({ url: "search", type: "GET", data: { keyword:JSON.stringify($('#keyword').val())}, success: (data)=>{ var student = JSON.parse(data); var li = ""; $('#size').text(student.length); student.forEach((element,index) =>{ li += "<li>["+(index+1)+"] " + element.name + ",学号:"+element.account+"，政治面貌:"+element.politics+"，联系方式:"+element.tel+"</li>"; }); $('#content').html(li); } }); }); </script> </body>