简洁好看的登录和查询界面

 login.html 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>登录界面</title>
<link
     href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"
     rel="stylesheet" />
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script  type="text/javascript" src="../js/index.js"></script>
 
</head>
<body>
     <form id="form1" class="well"
          style="width: 30em; margin: auto; margin-top: 150px;">
          <h3>用户登录</h3>
          <div class=" input-group input-group-md">
              <span class="input-group-addon" id="sizing-addon1"><i
                   class="glyphicon glyphicon-user" ></i></span> 
                   <input id="userName" type="text" class="form-control" />
                   
          </div>
          <br />
          <div class="input-group input-group-md">
              <span class="input-group-addon" id="sizing-addon1"><i
                   class="glyphicon glyphicon-lock"></i></span>
                    <input type="password" id="password" class="form-control" />
          </div>
          <br/>
          <button type="button" id="bn" class="btn btn-success btn-block">登录</button>
		  <a class="btn btn-sm btn-white btn-block" style="text-align: right;" th:href="@{register}" href="register.html"><h6>还没有账户?前往注册</h6></a>
     </form>
  </body>			 			 
</html>

 

index.js 

$(document).ready(function(){ 
$("#bn").click(function(){
				var userName=$("#userName").val();
				var password=$("#password").val();
				
				var error="";
				 if (userName=="") {
						error+="用户名不能为空";
						error+="\n";
						
					}
				 if (password=="") {
				    	error+="密码不能为空";
				    	error+="\n";
				    	}
				 if (error!="") {
						alert(error);
						}
				 else{
					
						$.ajax({
							type:'POST',
							dataType:'json',
							url:'http://localhost:9003/login',
							contentType:'application/json;charset=UTF-8',	
							data:JSON.stringify({"userName":userName,"password":password}),
							
							success:function(data1){//返回结果
								
								if(data1){

									window.location.href="success.html?userName="+userName;
									//data.username
								  }
							
								 else {
									//debugger;
									alert("用户名或密码错误");
								} 
								
							}
						});
					
				}			
			});
})

 

success.html  

 

<!DOCTYPE html>
<html>

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset="UTF-8">
<title>学生信息查询界面</title>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"  rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/success.css"/> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script  type="text/javascript" src="../js/success.js"></script>
<Script language="javascript"> 
function GetQueryString(name)
{
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);//search,查询?后面的参数,并匹配正则
     if(r!=null)return  unescape(r[2]); return null;
}

</script>

</head>
<body class="well" style="width: 50em; margin: auto; margin-top: 150px; margin-color:black;margin-width:20px; background-color:#87CEFA">
<h4 >成功登陆!</h4>
 
<marquee direction="left" behavior="alternate"><span id="name"></span><h4>欢迎您</marquee>
        
         <h3 style="color:#6B8E23">欢迎您,sysadmin</h3>
         <hr />
         <div>
         <form action="#" method="get">
            <table border="0px">
                <tr height="38px">
                    <td class="left">年级:</td>
                    <td >
                        <select style="width:170px"   name="grade" id="nianji">
                            <option value="0"></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </td>
                   
					<td class="right" >班级:</td>
					 <td>
						<select style="width:170px" name="class" id="banji"> 
                            <option value="0"></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </td>
                   
                </tr>
                <tr height="35px">
                    <td class="left">姓名:</td>
                    <td>
                        <input type="text" id="user_name"  />
                    </td>
					<td class="right">性别:</td>
                    <td>
						全部<input type="radio" name="sex" id="" value=" " />
					                 男<input type="radio" name="sex" id="" value="男" />
					                 女<input type="radio" name="sex" id="" value="女" />
                    </td>
                </tr>
             
            </table>
        </form>
        </div>
       <input type="button" class="btn btn-success btn-block" id="btn"  value="查询"/>
       <div class="listDIV">
    <table class="table table-striped table-bordered table-hover table-condensed">

        <caption >学生列表 </caption>
        <thead>
        <tr class="success">
            <th id="num" width="80px">学号</th>
            <th id="name" width="80px">姓名</th>
            <th id="sex" width="80px">性别</th>
            <th id="grade" width="80px">年级</th>
            <th id="class_name" width="80px">班级</th>
            <th id="chinese" width="80px">语文</th>
            <th id="math" width="80px">数学</th>
            <th id="english" width="80px">英语</th>
           <!--  <th width="80px"><a href="/editStudent?id=${s.id}"><span class="glyphicon glyphicon-edit"></span> </a></th>
            <th width="80px"><a href="/deleteStudent?id=${s.id}" onclick="javascript:return del();"><span
                        class="glyphicon glyphicon-trash"></span> </a></th> -->
        </tr>
        </thead>

        <tbody id="tbody_result">
       
        </tbody>
    </table>
   
    <div style="text-align:right">
    
             第<input  type="text" id="yeshu" style="width:40px;height:30px" value="1"/>页<input type="button" id="fanye" value="翻页" style="width:40px;height:30px"/>
  
     </div>
   </div>
</body>
</html>

  

success.js 

$(document).ready(function(){ 
$("#btn").click(function(){
				
				var grade=$("#nianji option:selected").val();
				var class_name=$("#banji option:selected").val();
				var name=$("#user_name").val();
				var sex=$('input[name="sex"]:checked').val();
				var page_num=$("#yeshu").val();
				var page_size= 5;
				
									
						$.ajax({
							type:'POST',
							dataType:'json',
							url:'/info/queryByCon',
							contentType:'application/json;charset=UTF-8',
							async: false,
							data:JSON.stringify({
								"name": name,
								"sex": sex,
						        "grade": grade,
						        "class_name": class_name,
						        "page_num": (page_num - 1)*page_size,
						        "page_size": page_num*page_size
							}),
							
							success:function(data){//返回结果
								 
					                    var str = "";  
					                   
					                for(var i=0; i<data.length;i++){
					                   str += "<tr>" +  
					                   "<td>" + data[i].student_id + "</td>" +  
					                   "<td>" + data[i].name + "</td>" +  
					                   "<td>" + data[i].sex + "</td>" +  
					                   "<td>" + data[i].grade + "</td>" +  
					                   "<td>" + data[i].class_name + "</td>" +  
					                   "<td>" + data[i].chinese_score + "</td>" +  
					                   "<td>" + data[i].math_score + "</td>" +  
					                   "<td>" + data[i].english_score + "</td>"+
					                   "</tr>";  
					                 }
					                    document.getElementById("tbody_result").innerHTML=str;
								} 
								
						});
				
			});
  
						$("#fanye").click(function(){
							var grade=$("#nianji option:selected").val();
							var class_name=$("#banji option:selected").val();
							var name=$("#user_name").val();
							var sex=$('input[name="sex"]:checked').val();
							var page_num=$("#yeshu").val() ;
							var page_size= 5;
							
												
									$.ajax({
										type:'POST',
										dataType:'json',
										url:'/info/queryByCon',
										contentType:'application/json;charset=UTF-8',
										async: false,
										data:JSON.stringify({
											"name": name,
											"sex": sex,
									        "grade": grade,
									        "class_name": class_name,
									        "page_num": page_num+1,
									        "page_size": (page_num+1)*page_size
										}),
										
										success:function(data){//返回结果
											 
								                    var str = "";  
								                   
								                for(var i=0; i<data.length;i++){
								                   str += "<tr>" +  
								                   "<td>" + data[i].student_id + "</td>" +  
								                   "<td>" + data[i].name + "</td>" +  
								                   "<td>" + data[i].sex + "</td>" +  
								                   "<td>" + data[i].grade + "</td>" +  
								                   "<td>" + data[i].class_name + "</td>" +  
								                   "<td>" + data[i].chinese_score + "</td>" +  
								                   "<td>" + data[i].math_score + "</td>" +  
								                   "<td>" + data[i].english_score + "</td>"+
								                   "</tr>";  
								                 }
								                    document.getElementById("tbody_result").innerHTML=str;
											} 
											
									});
							   $("#yeshu").val(parseInt(page_num)+1);
		                     });
})

 

 

                     

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值