时间匆忙，今天只能给静态页面的代码。后续会补上。。。哈哈
一、页面初始化
1-1构建表格：通过jq的get方法向服务器请求数据，根据服务器发送回来的数据构建表格
1-2 添加监听：为“添加““删除”按钮添加点击事件
//1.页面初始化
$(function () {
//①.通过get方法向服务器请求数据，根据服务器返回的数据构建表格
$.get('/user',{},function(data){
var users =[];
if(data!=undefined && data!=null){
users =data;
}
showUsers(users);
})
//② 添加监听事件--点击添加就调用添加行的函数
$('#addrow').click(function () {
addUser();
});
})
//2.为删除按钮动态添加click事件
function addlisten() {
$('.del').bind('click',function (){
var username=$(this).parent().parent().children('td').first().html();
deluser(username);
});
}
二、查找用户
1-1清除表格：每次调用前必须清空表格，否则会显示上次表格的内容
1-2 动态生成表格：根据后台传递的数据动态生成tr、td以及动态添加内容，最后将生成的tr、td添加到表格中
1-3 绑定事件：每次创新表格前，都为删除按钮、修改按钮添加相应的事件
function showUsers(users) {
//1-1 清空表格
$('#userTable').html('');
//1-2 动态生成表格和内容
if(users==[]||users.length==0) {
$('#userTable').html('当前没有用户');
}else {
var $userTable= $('#userTable');
for (var i = 0; i < users.length; i++) {
var $row = $("<tr></tr>");
var $td1 = $("<td></td>");
$td1.html(users[i].username);
var $td2 = $("<td></td>");
$td2.html(users[i].age);
var $td3 = $("<td></td>");
$td3.html(users[i].gender);
var $td4 = $("<td></td>");
var $input1=$('<input type="button" value="del" class="del"/>' );
var $input2=$('<input type="button" value="modify" class="modify"/>' );
$td4.append($input1,$input2);
$row.append($td1,$td2,$td3,$td4);
$userTable.append($row);
}
//1-3 为表格的删除和修改按钮添加事件
addlisten();
addModifyListen();
}
}
三、添加用户
1-1获取输入框的内容
1-2 将输入框的内容通过post方法传递给服务器
1-3 对服务器发送回来的数据进行处理。
返回成功：调用showuser方法，重新显示表格的内容+空输入框的内容，方便下次添加用户。
返回失败：返回失败的信息
//3.添加用户
// ① 获取输入框的内容
// ② 将输入框的内容通过post方法传递给服务器
// ③ 对服务器发送回来的数据进行处理
// 返回成功：
// 1.1 调用showuser方法，重新显示表格的内容
// 1.2 清空输入框的内容，方便下次添加用户
// 返回失败：返回失败的信息
function addUser() {
//1.获取输入框的内容
var username=$('#username').val();
var age=$('#age').val();
var gender=$('#gender').val();
//2.将输入框的内容传输到router中--提交的地址 + 提交的数据 + 回调函数
$.post('/user',{username:username,age:age,gender:gender},function(data){
//3.对返回的数据进行处理
//如果成功，就重新显示表格并且清除输入框的内容；否则给出提示
if(data.success){
//重新显示表格
showUsers(data.users);
//清除输入框的内容
$('#username').val('');
$('#age').val('');
$('#gender').val('male');
}else{
alert(data.msg);
}
})
}
四、删除用户
核心：通过RESTFULL风格传递要删除的用户名
1-1 判断用户名是否为空
空：给出提示;
非空：通过ajax提交数据
ajax提交数据：url--地址后面追加上要删除的用户名；type--delete；success--返回成功：调用showUser方法，重新显示表格，否则返回失败：给出提示。
//4.删除用户--通过RESTFULL风格传递要删除的用户名
// ① 判断用户名是否为空，
// 空：给出提示
// 非空：通过ajax提交数据
// ② ajax提交数据
// 1.url--地址后面追加上要删除的用户名
// 2.type--delete
// 3.success
// 返回成功：调用showUser方法，重新显示表格
// 返回失败：给出提示
function deluser(username) {
if(username == undefined || username ==''){
alert('删除的用户名不能为空！');
}else{
$.ajax({
url:'/user/'+username,
type:'delete',
success:function(data){
if(data.success){
showUsers(data.users);
}else{
alert(data.msg);
}
}
})
}
}
五、修改用户
核心：根据客户端发送过来的数据和数据库中的数据进行比较，只有在数据库中的数据才能进行删除
1-1 获取数据库的数据
1-2 根据用户发送的数据和数据库中的数据进行匹配。如果匹配成功，则将用户发送的数据修改到数据库中；匹配不成功则返回提示继续信息。
//5.修改用户信息
function addModifyListen() {
$('.modify').bind('click',function (){
var $tds=$(this).parent().parent().children('td');
//第一个参数
var value=$tds[0].innerHTML;
$tds[0].innerHTML='';
var $input=$('<input type="text" disabled="disabled" value=""/>');
$input.val(value);
$($tds[0]).append($input);
for(var i=1;i<$tds.length-1;i++){
var value=$tds[i].innerHTML;
$tds[i].innerHTML='';
var $input=$('<input type="text" value=""/>');
$input.val(value);
$($tds[i]).append($input);
}
$(this).unbind();
$(this).val('save');
$(this).bind('click',function () {
// 1.获取表格的数据
var $tds=$(this).parent().parent().children('td');
var username=$($tds[0]).children('input').first().val();
var age=$($tds[1]).children('input').first().val();
var gender=$($tds[2]).children('input').first().val();
//2.ajax提交数据-- 提交地址 + 提交方法 + 提交数据 + 提交成功函数处理
$.ajax({
url:'/user',
type:'put',
data:{username:username,age:age,gender:gender},
success:function(data){
if(data.success){
showUsers(data.users);
$(this).val('modify');
}
else{
alert(data.msg);
}
}
})
})
});
}
