<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><script type="text/javascript" src="<%= application.getContextPath() %>/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//添加用户
$(function(){
$("#add").on("click", addNewUser);
})
function addNewUser(){
var name = $.trim($("#txtName").val());
var password = $.trim($("#txtPassword").val());
var age = $.trim($("#txtAge").val());
$.post("/ssm/addUser", {"name": name, "password": password, "age": age}, function(){
alert("添加成功!")
});
}
//删除用户
$(function(){
$("#delete").on("click",deleteUser);
})
function deleteUser(){
var id=$.trim($("#deleteid").val());
$.get("/ssm/deleteUser",{"id":id},function(){
alert("删除成功!")
});
}
//查询所有用户
$(function(){
$("#findalluser").click(function(){
$.ajax({
type:"POST",
dataType:"json",
url:"/ssm/findallUser",
success:function(msg){
var str="";
for(i in msg){
str+="<tr><th>"+msg[i].id+"</th><th>"+msg[i].name+"</th><th>"
+msg[i].password+"</th><th>"+msg[i].age+"</th><tr>"
}
$("#findall").append(str);
}
});
});
});
//根据id查找一个用户
$(function(){
$("#find").click(function(){
$.ajax({
type:"POST",
data:{id:$("#findid").val()},
dataType:"json",
url:"/ssm/showUser",
success:function(user){
var str="";
str+="<tr><th>"+user.id+"</th><th>"+user.name+"</th><th>"
+user.password+"</th><th>"+user.age+"</th><tr>"
$("#finduserbyid").append(str);
}
})
})
})
//根据id修改用户信息
$(function(){
$("#update").on("click",updateUser);
})
function updateUser(){
alert($.trim($("#updateid").val()))
alert($.trim($("#updatename").val()))
alert($.trim($("#updatepassword").val()))
alert($.trim($("#updateage").val()))
var id=$.trim($("#updateid").val());
var name=$.trim($("#updatename").val());
var password=$.trim($("#updatepassword").val());
var age=$.trim($("#updateage").val());
$.post("/ssm/updateUser",{"id":id,"name":name,"password":password,"age":age},function(){
alert("修改成功!")
});
}
</script>
<title>用户管理</title>
</head>
<body>
<div>
<p>姓名:<input type="text" id="txtName"></p>
<p>密码:<input type="password" id="txtPassword"></p>
<p>年龄:<input type="text" id="txtAge"></p>
<p><button id="add">添加</button></p>
</div>
<hr style="height:1px;border:none;border-top:1px dashed #0066CC;" />
<div>
<p>输入用户id:<input type="text" id="deleteid"></p>
<p><button id="delete">删除</button></p>
</div>
<hr style="height:1px;border:none;border-top:1px dashed #0066CC;" />
<div><p><button id="findalluser">查询所有</button></p></div>
<div>
<table width="300" border="1" >
<thead id="findall">
<tr>
<th width="50">id</th>
<th width="50">姓名</th>
<th width="50">密码</th>
<th width="50">年龄</th>
</tr>
</thead>
</table>
</div>
<hr style="height:1px;border:none;border-top:1px dashed #0066CC;" />
<div>
<p>输入用户id:<input type="text" id="findid"></p>
<p><button id="find">查询</button></p>
</div>
<div>
<table width="300" border="1" >
<thead id="finduserbyid">
<tr>
<th width="50">id</th>
<th width="50">姓名</th>
<th width="50">密码</th>
<th width="50">年龄</th>
</tr>
</thead>
</table>
</div>
<hr style="height:1px;border:none;border-top:1px dashed #0066CC;" />
<div>
<p>输入用户id:<input type="text" id="updateid"></p>
<p>输入用户姓名:<input type="text" id="updatename"></p>
<p>输入密码:<input type="password" id="updatepassword"></p>
<p>输入用户年龄:<input type="password" id="updateage"></p>
<p><button id="update">修改</button></p>
</div>
</body>
</html>
来源: http://www.cnblogs.com/LiaoYunChuan/p/7398295.html