/hz-ssm-cyp/WebContent/WEB-INF/jsp/user/list.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!--這裏編寫java代碼，多行 -->
<%
String path = request.getContextPath();
out.println("path="+path);
%>
<style type="text/css">
div{
/* text-align: center; */
}
form{
/* text-align: center; */
border :1px solid;
width:500px;
height:300px;
margin-left:100px;
}
form div{
margin-top:10px;
margin-left:10px;
}
form input ,form select{
width:150px;
margin-left:20px;
}
table ,table tr td{
border : 1px solid;
}
</style>
</head>
<body>
<!-- 地址前面帶/ 表示絕對路徑 /hz-ssm; ./hz-ssm:相對路徑 -->
<div style="text-align: center;">用戶新增</div>
<form id="addform" action="<%=path%>/user/add">
<div>
姓名：<input name="name" />
登錄名：<input name="loginId" />
</div>
<div>
性別：<select name="sex">
<option value="0">男</option>
<option value="1">女</option>
</select>
用戶年齡：<input name="age" />
</div>
<div>
密碼：<input name="password" type="password" />
註冊時間：<input name="registerTime" id="registerTime"/>
</div>
<div>
狀態：<select name="status">
<option value="0">無效</option>
<option value="1">有效</option>
</select>
角色：<select name="roleId">
<option value="0">請選擇角色</option>
</select>
</div>
<div style=" text-align: center;">
<button type="button" id="btn-save">保存</button>
<button type="button" id="btn-reset">重置</button>
</div>
</form>
<div style="margin-top:30px;margin-left:20px;">
<table id="userTable">
<thead>
<tr>
<td>選擇</td>
<td>id</td>
<td>姓名</td>
<td>登錄名稱</td>
<td>性別</td>
<td>年齡</td>
<td>密碼</td>
<td>註冊時間</td>
<td>狀態</td>
<td>操作</td>
<td>操作2</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script type="text/javascript" src="<%=path%>/static/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="<%=path%>/static/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
$("#registerTime").on("click",function(){
WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'});
});
/* 動態獲取角色 */
$.ajax({
url:"<%=path%>/role/query",
/* url:"http://127.0.0.1:8080/hz-ssm/role/query", */
type:"post",
success:function(data){
if(data.result){
var html = "";
$(data.result).each(function(){
var op = "<option value='"+ this.id+"'>" + this.name +"</option>";
html += op;
})
$("[name='roleId']").append(html);
}
}
});
function formatDate(t){
var date = new Date(t);
var strDate = date.getFullYear() +"-"+(date.getMonth() + 1)+"-"
+ date.getDate()+" " +date.getHours()+":"+ date.getMinutes()+":" +date.getSeconds() ;
return strDate;
}
/* 動態獲取用戶信息 */
$.ajax({
url:"<%=path%>/user/query",
type:"post",
success:function(data){
debugger;
if(data.result){
var html = "";
$(data.result).each(function(){
html+="<tr>";
html+="<td><input type ='checkbox' value ='"+ this.id+"'</input></td>";
html+="<td>"+ this.id+"</td>";
html+="<td>"+ this.name+"</td>";
html+="<td>"+ this.loginId+"</td>";
html+="<td>"+ (this.sex ==0?"男":"女") +"</td>";
html+="<td>"+ this.age+"</td>";
html+="<td>"+ this.password+"</td>";
html+="<td>"+ formatDate(this.registerTime)+"</td>";
html+="<td>"+ (this.status==0?"無效":"有效")+"</td>";
html+="<td><button class='btn-del' value='"+this.id+"'>刪除</button></td>";
html+="<td><button class='btn-detail' value='"+this.id+"'>詳情</button></td>";
html+="</tr>"
})
$("#userTable").append(html);
}
}
});
/* 給所有詳情按鈕綁定事件 */
$("table tbody").on("click",".btn-detail",function(){
var that = $(this).parents("tr");
var id = $(this).val();
window.open("http://localhost:8080/hz-ssm-cyp/user/query?id="+id)
})
/* 給所有刪除按鈕綁定事件 */
$("table tbody").on("click",".btn-del",function(){
var that = $(this).parents("tr");
var id = $(this).val();
$.ajax({
url:"<%=path%>/user/delete",
data:{
id:id
},
success:function(data){
if(data.result == "success"){
that.remove();
alert("刪除成功！")
}
}
})
})
/* 給保存按鈕綁定提交事件 */
$("#btn-save").on("click",function(){
/* 發送ajax請求到後端 */
var data = {};
/* 直接手動拼接數據 */
data.name = $("[name='name']").val();
data.loginId = $("[name='loginId']").val();
data.sex = $("[name='sex']").val();
data.age = $("[name='age']").val();
data.password = $("[name='password']").val();
data.registerTime = $("[name='registerTime']").val();
data.status = $("[name='status']").val();
/* 遍歷表單裏面所有的輸入框，獲取其數據，構造成json */
/* $("#addform :input").each(function(){
if($(this).attr("name")){
data[$(this).attr("name")] = $(this).val();
}
}) */
debugger;
/* 注意相對路徑和絕對路徑問題 */
$.ajax({
url:"<%=path%>/user/add",
type:"post",
data:data,
success:function(data){
if(data.result == "success"){
alert("新增成功");
}
},
error:function(a,b,c){
debugger;
}
});
});
</script>
</body>
</html>
cn.dw.hz.servlet.TestServlet
/**
*
*/
package cn.dw.hz.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* @author aubrey
* @date 下午2:38:26
*
*/
//@WebServlet("/test")
public class TestServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// PrintWriter print = resp.getWriter();
// print.write("hello");
resp.getWriter().write("hello");
}
}
/hz-ssm-cyp/WebContent/index.jsp (Echarts示例)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="./echarts.min.js"></script>
</head>
<body>
welcome
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>