web考试 Jquery

最新推荐文章于 2024-10-09 20:10:15 发布

qq_ouyang

最新推荐文章于 2024-10-09 20:10:15 发布

阅读量41

点赞数

文章标签：前端 jquery javascript

本文链接：https://blog.csdn.net/qq_58433429/article/details/130321961

版权

register .html

<!--register.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<style>
		/* 请此处添加页面美观控制代码，完成题目要求。如果需要使用bootstrap，可以引用css和js目录下的文件*/
			table tr{
				width: 380px;
				border: 0;
				}
			table td{
				height: 18px;
				border: 0;
				}
			table{
				
				border: 0;
				font-size: 14px;
			}
			table{
				text-align: left;
				valign: center;
			}
			.firstTD{
				background-color: #ECE7E7;
				color: #000000;
			}
			#logoImg{
				width: 380px;
			}
			.error{
				font-size: 10px;
				color: #F50F13;
			}
		</style>
	</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" checked="男"/>男 <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>
	<script>
		
		// $("#userno").mouseleave(function(){
		// 	var userno=$("#userno").val();
		// 	if(userno==""){
		// 		$("#userno_error").html("请输入你的工号");
		// 	}
		// })
		$(document).on("blur", "#userno", function () {
			
			var userno=$("#userno").val();
			if(userno==""){
				$("#userno_error").html("工号不能为空");
			}
		})
		$(document).on("blur", "#username", function () {
			var username=$("#username").val();
			console.log(username);
			var len=$("#username_error").val().length;
			console.log("len=="+len);
			var first=username.charAt(0);
			if(username==""){
				$("#username_error").html("姓名不能为空");
			}
			else if(/\d/.test(first)){
				$("#username_error").html("头字符不能为数字");
			}
			else if(len<2 || len>6){
				$("#username_error").html("姓名长度为2-6位");
			}
		})
		$(document).on("blur", "#email", function () {
			var email=$("#email").val();
			if(email==""){
				$("#email_error").html("邮箱不能为空");
			}
		})
		$(document).on("blur", "#userpwd", function () {
			var userpwd=$("#userpwd").val();
			if(userpwd==""){
				$("#userpwd_error").html("密码不能为空");
			}
		})
		$(document).on("blur", "#repwd", function () {
			var repwd=$("#repwd").val();
			// console.log("repwd="+repwd);
			var userpwd=$("#userpwd").val();
			// console.log("userpwd="+userpwd);
			if(repwd==""){
				$("#repwd_error").html("密码不能为空");
			}
			else if(repwd!==userpwd){
				$("#repwd_error").html("密码不一致");
			}
			else if(repwd===userpwd){
				$("#repwd_error").html("密码一致");
			}
		})
		btnok
		$("#btnok").click(function(){
			var userno=$("#userno").val();
			var username=$("#username").val();
			var email=$("#email").val();
			var userpwd=$("#userpwd").val();
			var select=$("input[name='sex']:checked");
			var sex=select.val();
		
			$.ajax({
				type:"post",
				// data:JSON.stringify({userno,username,email,userpwd,sex}),
				data:{userno,username,email,userpwd,sex},
				url:"http://120.79.153.0:8080/register.aspx",
                // contentType: "application/json; charset=utf-8",
                success:function(res){
                    console.log(res);
                    alert("注册成功！")
                    location.href='login.html'
                },
                error:function(res){
                    console.log(res)
                }
			})
		})
	</script>
	</body>
</html>

login.html

<!--login.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录</title>	
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<!--CSS设置信息请在css/login.css进行设置	-->
		<link href="css/login.css" rel="stylesheet" type="text/css" />	
		<style>
			#username div{
				display: inline-block;
			}
			#password div{
				display: inline-block;
			}
			#username input{
				text-align: left;
			}
			#password input{
				text-align: left;
			}
		</style>
		
		<script>			
			/*
			请在此处添加控制代码，完成题目要求内容。如果需要jquery，可以自行引用js目录下的文件
			*/
			
			$(document).on("click","#btnLogin",function(){
				console.log("AAABBB");
				var userno=$("#userno").val();
				localStorage.setItem('userno',userno);
				var userpwd=$("#userpwd").val();
				if(userno=="" && userpwd==""){
					$("#error").html("工号与密码不能为空");
				}else if(userno==""){
					$("#error").html("工号不能为空");
				}else if(userpwd==""){
					$("#error").html("密码不能为空");
				}else{
					$.ajax({
						url:"http://120.79.153.0:8080/login.aspx",
						type:"get",
						data:{
							userno,userpwd
						},
						success:function(res){
							// console.log(res);
							if(res=="TRUE"){
								alert("登陆成功");
								
								location.href="mainframe.html";
							}else{
								alert("登录失败");
							}
						}
					})
				}
				
			})
		
			$(document).on("click","#btnCancel",function(){
				$("#userno").val("");
				$("#userpwd").val("");
				$("#error").html("");
			})
		</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>

mainframe.html

 <!--mainframe.html-->
 <!DOCTYPE html>
<html>
 <head>
  <title>  </title> 
 </head>
 <body>
	<iframe src="navigation.html" width="100%" height="500" frameborder="0">
		
	</iframe>
 </body>
	
</html>

learning.html

 <!--learning.html-->
 <!DOCTYPE html>
<html>
 <head>
  <title> 操作说明 </title>
  <style type="text/css">
    #introduce{
        width:100%;
        height: 50px;
        
    }
    #introduce div:first-child{
        font-size: 20px;
        line-height: 50px;
        border-bottom: 1px solid green;
        text-align: center;
    }
	span{
        display: block;
        color: rgb(55, 208, 208);
        margin-top: 20px;
        margin-bottom: 20px;
    }
	span:last-child{
        color:cadetblue;
        text-align: right;
    }
  </style>
  </head>

 <body>
   
	 <div id="introduce">
        <div>操作说明</div>
        <div>
            <span>1.必须先登录才能管理图书</span>
            <span>2.管理员只能操作自己添加的图书信息</span>
            <span>图书管理办公室</span>
        </div>
     </div>
	 
	 
	 
 </body>
</html>

navigation.html

 <!--navigation.html-->
 <!DOCTYPE html>
 <html>
 <head>
  <title>导航栏</title>
  <style type="text/css">
    #navigation{
        background-color: rgb(168, 238, 168);
        height: 10%;
    }
    
	#navigation div{
        display: inline-block;
        color: black;
        width: 400px;
        height: 100px;
        line-height: 100px;
        font-size: 20px;
        margin-left:30px ;
    }
	  
	  
	  
  </style>
 
 </head>

 <body>
    <div id="navigation">
        <div><a href="learning.html" target="iframe_a">操作学习</a></div>
        <div><a href="index.html" target="iframe_a">管理图书</a></div>
        
    </div>
    <iframe src="learning.html" width="100%" height="500" frameborder="0" name="iframe_a">
		
    </iframe>
	 
	 
 </body>
</html>

index.html

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书信息管理</title>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        #border{
            margin-top: 30px;
            border: 1px solid green;
            width: 100%;
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #border div{
            display: inline-block;
        }
		
		
		
    </style>
	
	
	<script>
        // 自动获取table表
        function table(){
            var userno = localStorage.getItem('userno');
            $.ajax({
                url:'http://120.79.153.0:8080/getBooks.aspx',
                type:"get",
                data:{userno},
                success:function(res){
                    console.log(res);
                    console.log(res.length)
                    console.log(res[0].bookNo);
                    var htmlcontent=""
                    for(var i=0;i<res.length;i++){
                        htmlcontent+="<tr>"
                        htmlcontent+="<td>"+res[i].bookNo+"</td>"
                        htmlcontent+="<td>"+res[i].bookName+"</td>"
                        htmlcontent+="<td>"+res[i].bookPublisher+"</td>"
                        htmlcontent+="<td><button id='edit'>修改</button></td>"
                        htmlcontent+="</tr>"
                    }
                    $("#tobody").html(htmlcontent)
                }
            })
        }
        $(document).ready(function(){
            table();
        })
        // 添加或修改图书
		// $("#addOredit").click(function(){
        $(document).on("click","#addOredit",function(){
            var text=$(this).text();
            console.log(text);
            console.log("这个数据");
            if(text=="确定添加"){
                var userno=localStorage.getItem("userno");
                var bookNo=$("#bookNo").val();
                var bookName=$("#bookName").val();
                var bookPublisher=$("#bookPublisher").val();
                $.ajax({
                    url:"http://120.79.153.0:8080/addBooks.aspx",
                    data:{userno,bookNo,bookName,bookPublisher},
                    type:"post",
                    success:function(res){
                        if(res=="TRUE"){
                            alert("添加成功");
                            table();
                        }else{
                            alert("添加失败");
                        }
                    }
                })
            }else if(text=="确定修改"){
                var userno=localStorage.getItem("userno");
                var bookNo=$("#bookNo").val();
                var bookName=$("#bookName").val();
                var bookPublisher=$("#bookPublisher").val();
                $.ajax({
                    url:"http://120.79.153.0:8080/updateBooks.aspx",
                    data:{userno,bookNo,bookName,bookPublisher},
                    type:"post",
                    success:function(res){
                        if(res=="TRUE"){
                            alert("修改成功");
                            $("#addOredit").html("确定添加");
                        }else{
                            alert("修改失败");
                        }
                    }
                })
            }
            
        })
        // 修改图书
        $(document).on("click","#edit",function(){
            var bookNo=$(this).parent().parent().find("*").eq(0).text();
            var bookName=$(this).parent().parent().find("*").eq(1).text();
            var bookPublisher=$(this).parent().parent().find("*").eq(2).text();
            $("#bookNo").val(bookNo);
            $("#bookName").val(bookName);
            $("#bookPublisher").val(bookPublisher);
            $("#addOredit").html("确定修改");
        })
	</script>
</head>
<body>
    <div>
        <div id="border">
            <div>图书编号</div>
            <div><input type="text" id="bookNo" placeholder="" maxlength="12" ></div>
            <div>图书名字</div>
            <div><input type="text" id="bookName" placeholder="" maxlength="12" ></div>
            <div>出版社</div>
            <div><input type="text" id="bookPublisher" placeholder="" maxlength="12" ></div>
            <div><button id="addOredit">确定添加</button></div>
        </div>
        <div>
            <table>
                <thead>
                    <tr>
                        <th>图书编号</th>
                        <th>图书名字</th>
                        <th>出版社</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tobody">

                </tbody >
            </table>
        </div>
    </div>
	
	
</body>
</html>