register.html
代码:
<!--register.html--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /* 请此处添加页面美观控制代码,完成题目要求。如果需要使用bootstrap,可以引用css和js目录下的文件*/ table, td { border: none; } table, img { width: 380px; text-align: left; vertical-align: middle; } tr { height: 18px; } .firstTD { background-color: #ECE7E7; color: #000000; } #main { font-size: 14px; } .error { font-size: 10px; color: #F50F13; } </style> <script src="./js/jquery-3.2.0.min.js"></script> <script> /* 请在此处添加控制代码,完成题目要求内容。如果需要jquery,可以自行引用js目录下的文件 */ $(document).ready(function () { check01(); check02(); check03(); check04(); login(); }); function check01() { $("#userno").blur(function () { let userno = $("#userno").val(); console.log(userno); $("#userno_error").empty(); if (userno == "") { $("#userno_error").append("请检查输入!"); } }); } function check02() { $("#username").blur(function () { let username = $("#username").val(); console.log(username); $("#username_error").empty(); if (username == "" || username.length < 2 || username.length > 6) { $("#username_error").append("请检查输入!"); } }); } function check03() { $("#email").blur(function () { let email = $("#email").val(); console.log(email); $("#email_error").empty(); if (email == "") { $("#email_error").append("请检查输入!"); } }); } function check04() { $("#userpwd").blur(function () { let userpwd = $("#userpwd").val(); console.log(userpwd); $("#userpwd_error").empty(); if (userpwd == "") { $("#userpwd_error").append("请检查输入!"); } }); $("#repwd").blur(function () { let userpwd = $("#userpwd").val(); let repwd = $("#repwd").val(); console.log(repwd); $("#repwd_error").empty(); if (repwd == "") { $("#repwd_error").append("请检查输入!"); } else if (userpwd != repwd) { $("#repwd_error").append("两次密码不一致!"); } }); } function login() { $("#btnok").click(function () { let userno = $("#userno").val(); let username = $("#username").val(); let email = $("#email").val(); let userpwd = $("#userpwd").val(); let sex = $('input:radio:checked').val(); console.log(sex); $.ajax({ type: "post", url: "http://120.79.153.0/register.aspx", data: { userno: userno, userpwd: userpwd, username: userpwd, sex: sex, email: email }, complete: function (data) { console.log(data); if (data.responseText == "TRUE") { alert("注册成功"); location.replace("./login.html"); } else { alert("注册失败"); } } }); }); } </script> </head> <!-- 本题仅能在register.html的<style>和<script>标签中新增样式或JavaScript代码;不可改动HTML的标签和内容,亦不可在标签中新增id、class或style属性。 --> <body> <div id="main"> <table border="1" cellspacing="0" cellpadding="5px"> <tr> <td colspan="3"> <div id="header"><img src="img/logo.png" id="logoImg" /></div> </td> </tr> <tr> <td class="firstTD">工号:</td> <td><input type="text" id="userno" maxlength="12"> </td> <td> <div id="userno_error" class="error"></div> </td> </tr> <tr> <td class="firstTD">姓名:</td> <td><input type="text" id="username" /> </td> <td> <div id="username_error" class="error"></div> </td> </tr> <tr> <td class="firstTD">邮箱:</td> <td><input type="text" id="email" /> </td> <td> <div id="email_error" class="error"></div> </td> </tr> <tr> <td class="firstTD">登录密码:</td> <td><input type="password" id="userpwd" /> </td> <td> <div id="userpwd_error" class="error"></div> </td> </tr> <tr> <td class="firstTD">确认密码:</td> <td><input type="password" id="repwd"> </td> <td> <div id="repwd_error" class="error"></div> </td> </tr> <tr> <td class="firstTD">性别:</td> <td> <input name="sex" type="radio" value="1" />男 <input name="sex" type="radio" value="0" />女 </td> <td> <div id="sex_error" class="error"></div> </td> </tr> <tr> <td colspan="2" align="center"><input id="btnok" type="image" src="img/button.gif" /></td> <td></td> </tr> </table> </div> </body> </html>View Code
login.html
代码:
<!--login.html--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录</title> <!--CSS设置信息请在css/login.css进行设置 --> <link href="css/login.css" rel="stylesheet" type="text/css" /> <style> /* #username div:nth-child(1), #password div:nth-child(1) { float: left; } */ #username, #password { display: inline-block; } .inputarea { text-align: left; } </style> <script src="./js/jquery-3.2.0.min.js"></script> <script> /* 请在此处添加控制代码,完成题目要求内容。如果需要jquery,可以自行引用js目录下的文件 */ $(document).ready(function () { goBack(); login(); }); function goBack() { $("a").click(function () { location.replace("register.html"); }); } function login() { $("#btnLogin").click(function () { let userno = $("#userno").val(); let userpwd = $("#userpwd").val(); if (userno == "" || userpwd == "") { $("#error").append("请输入账号密码"); } else { $.ajax({ type: "post", url: "http://120.79.153.0/login.aspx?userno=" + userno + "&userpwd=" + userpwd, complete: function (data) { console.log(data); if (data.responseText == "TRUE") { localStorage.setItem("userno", userno); alert("登录成功"); location.replace("mainframe.html"); } else { alert("登录失败"); } } }); } }); $("#btnCancel").click(function () { $("#userno").val(""); $("#userpwd").val(""); $("#error").empty(); }); } </script> </head> <!-- 本题仅能在login.html的<style>和<script>标签中新增样式或JavaScript代码;不可改动HTML的标签和内容,亦不可在标签中新增id、class或style属性。 --> <body> <div id="username" class="inputarea"> <div>工号</div> <div><input type="text" id="userno" placeholder="请输入工号" maxlength="12"></div> </div> <div id="password" class="inputarea"> <div>密码</div> <div><input type="password" id="userpwd" placeholder="请输入密码"></div> </div> <div id="error"></div> <div id="login"> <input type="button" id="btnLogin" value="登录" /> <input type="button" id="btnCancel" value="取消" /> <a href="register.html">注册</a> </div> </body> </html>View Code
learning.html
代码:
<!--learning.html--> <!DOCTYPE html> <html> <head> <title> 操作说明 </title> </head> <body> <div id="title">操作说明</div> <div id="content"> <div>1.必须先登录才能管理图书。</div> <div>2.管理员只能操作自己添加的图书信息。</div> </div> <div id="sign"> <div>图书管理办公室</div> </div> </body> </html> <style> #title { color: green; font-size: 18px; text-align: center; border-bottom: 1px solid black; padding-bottom: 10px; font-weight: bold; } #content { padding: 10px; line-height: 25px; color: blue; text-align: left; } #sign { color: blue; text-align: right; } </style>View Code
mainframe.html
代码:
<!--mainframe.html--> <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="nav"> <div id="selectLearning">操作学习</div> <div id="selctManage">管理图书</div> </div> <div id="main"> <iframe id="learning" src="learning.html" width="100%" height="100%" scrolling="no"></iframe> <div id="manage"> <div id="inputMessage"> 图书编号<input id="bookNo" type="text"> 图书名称<input id="bookName" type="text"> 出版社<input id="bookPublisher" type="text"> <input type="button" id="sumbitAdd" value="确定添加"> <input type="button" id="sumbitModify" value="确定修改"> </div> <div id="content"> <table> </table> </div> </div> </div> </body> </html> <script src="./js/jquery-3.2.0.min.js"></script> <script> $(document).ready(function () { $("#learning").show(); $("#manage").hide(); selectLearning(); selectManege(); addBook(); modifyBook(); $("#sumbitAdd").show(); $("#sumbitModify").hide(); }); function selectLearning() { $("#selectLearning").click(function () { $("#learning").show(); $("#manage").hide(); }); } function selectManege() { $("#selctManage").click(function () { $("#manage").show(); $("#learning").hide(); refreshBooks(); }); } function refreshBooks() { let userno = localStorage.getItem("userno"); $.ajax({ type: "get", url: "http://120.79.153.0:8080/getBooks.aspx?", data: { userno: userno }, complete: function (data) { let books = data.responseJSON; if (books.length == 0) { $("#content table").hide(); alert("暂无图书信息"); } else { $("#content table").show(); $("#content table").empty(); let htmlContent = ""; htmlContent += "<tr><th>图书编号</th><th>图书名称</th><th>出版社</th><th>操作</th></tr>" for (let i = 0; i < books.length; i++) { htmlContent += "<tr>"; htmlContent += "<td>" + books[i].bookNo + "</td>"; htmlContent += "<td>" + books[i].bookName + "</td>"; htmlContent += "<td>" + books[i].bookPublisher + "</td>"; htmlContent += "<td>" + "<a href='javascript:void(0);'>修改</a></td></tr>"; } $("#content table").append(htmlContent); } } }); } function addBook() { $("#sumbitAdd").click(function () { let userno = localStorage.getItem("userno"); let bookNo = $("#bookNo").val(); let bookName = $("#bookName").val(); let bookPublisher = $("#bookPublisher").val(); $.ajax({ type: "post", url: "http://120.79.153.0:8080/addBooks.aspx", data: { userno: userno, bookNo: bookNo, bookName: bookName, bookPublisher: bookPublisher }, complete: function (data) { console.log(data); if (data.responseText == "TRUE") { alert("添加成功"); $("#bookNo").val(""); $("#bookName").val(""); $("#bookPublisher").val(""); refreshBooks(); } else { alert("添加失败"); } } }); }); } function modifyBook() { $("body").on("click", "#content > table > tr > td:nth-child(4)", function () { let currentRow = $(this).closest("tr"); let currentBookNo = currentRow.find("td:eq(0)").text(); let currentbookName = currentRow.find("td:eq(1)").text(); let currentbookPublisher = currentRow.find("td:eq(2)").text(); $("#bookNo").val(currentBookNo); $("#bookName").val(currentbookName); $("#bookPublisher").val(currentbookPublisher); $("#sumbitAdd").hide(); $("#sumbitModify").show(); }); $("body").on("click", "#sumbitModify", function () { let userno = localStorage.getItem("userno"); let newBookNo = $("#bookNo").val(); let newBookName = $("#bookName").val(); let newBookPublisher = $("#bookPublisher").val(); $.ajax({ type: "post", url: "http://120.79.153.0:8080/updateBooks.aspx", data: { userno: userno, bookNo: newBookNo, bookName: newBookName, bookPublisher: newBookPublisher }, complete: function (data) { if (data.responseText == "TRUE") { alert("修改成功"); $("#bookNo").val(""); $("#bookName").val(""); $("#bookPublisher").val(""); $("#sumbitAdd").show(); $("#sumbitModify").hide(); refreshBooks(); } else { alert("修改失败"); } } }); }); } </script> <style> html, body { width: 100%; height: 100%; } #nav { height: 10%; background-color: green; } #main { height: 90%; } #nav div { color: blue; font-size: 20px; margin-left: 80px; display: inline-block; margin-top: 2%; } #selectLearning:hover, #selctManage:hover, table td:last-child { cursor: pointer; } #learning { height: 100%; border: none; } #manage { height: 100%; } #inputMessage { margin-top: 2%; margin-bottom: 2%; height: 10%; border: 1px solid black; text-align: center; } #bookNo { margin-top: 2%; } table { margin-left: 10%; width: 80%; } table, th, td { border: 1px solid black; border-collapse: collapse; } tr th:nth-child(1) { width: 30%; } tr th:nth-child(2) { width: 30%; } tr th:nth-child(3) { width: 30%; } th { background-color: #fffcc6; font-weight: bold; } </style>View Code
标签:function,val,模拟题,let,userpwd,data,userno From: https://www.cnblogs.com/Sealgost/p/sim02.html