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);
});
})