标签：
本文所用ajax技术是Java web项目中实际使用的，所以具有一定的实用性，请仔细阅读代码，你会发现ajax动态增加和删除是很简单的。
首先前台代码
<head>
<script type="text/javascript" src="<%=path%>/scripts/jQuery/jquery-1.7.1.min.js"></script>
<title>账户管理</title>
<script type="text/javascript">
function retrieve(){
var name=$("#nameretrieve").val();
//每次检索前，清除表格行
$("#dataTable tbody").empty();
$.ajax({
type: "post",
dataType: "json",
url: "accountRetrieve.action?name="+name,
success: function (data) {
var len=data.length;
if(len>0){
//动态添加行
for(var i=0;i<len;i++){
$("#dataTable").append("<tr id=‘trid_"+data[i].id+"‘>"
+"<td>"+data[i].user+"</td>"
+"<td>"+data[i].level+"</td>"
+"<td>"+data[i].createdate+"</td>"
+"<td><a id=‘ruerid_"+data[i].id+"‘ onclick=‘pwdreset(this.id)‘ style=‘cursor:pointer;color:blue‘>重置</a></td>"
+"<td><a id=‘duerid_"+data[i].id+"‘ onclick=‘userdelete(this.id)‘ style=‘cursor:pointer;color:red‘>删除</a></td>"
+"</tr>");
}
}
else{
alert("账号不存在！");
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
function pwdreset(userid){
$.ajax({
type: "post",
dataType: "text",
url: "accountReset.action?userid="+userid.substr(7),
success: function (data) {
if(data!="success"){
alert(data);
}
else{
alert("密码重置成功！");
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
function userdelete(userid){
if(confirm("确定删除此账号吗？")){
$.ajax({
type: "post",
dataType: "text",
url: "accountDelete.action?userid="+userid.substr(7),
success: function (data) {
if(data!="success"){
alert(data);
}
else{
//删除成功后，删除表格行
alert("删除成功！");
$("#trid_"+userid.substr(7)).remove();
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
}
</script>
</head>
<body>
<div align="center">
<p>用户名：<input type="text" class="input_1" id="nameretrieve" />
<button type="button" class="search" onclick="retrieve()">检索</button>
</p>
</div>
<div align="center">
<table id="dataTable" cellpadding="0" cellspacing="1" border="1px solid #ccc">
<thead>
<tr>
<th width="20%">用户名</th>
<th width="10%">用户类型</th>
<th width="20%">创建时间</th>
<th width="10%">密码重置</th>
<th width="10%">删除</th>
</tr>
</thead>
</table>
</div>
</body>
后台代码是应用了SSI框架的，只能给出Action部分代码。
public class AccountAction extends ActionSupport{
private TUser tuser;
private AccountService accountService;
//账号检索，数据库查询返回的是List数据，需要转换为jsonArray格式
public String accountRetrieve() throws IOException{
String userName=ServletActionContext.getRequest().getParameter("name");
HttpServletResponse response=ServletActionContext.getResponse();
response.setContentType("text/json; charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
response.reset();
//根据用户名检索账号
Account checkAccount=new Account();
checkAccount.setUser(userName);
List<Account> accountlist=accountService.accountretrieve(checkAccount);
JSONArray jsonArray = JSONArray.fromObject(accountlist); //转化成json对象
out.print(jsonArray); //返给ajax请求
out.flush();
out.close();
return INPUT;
}
//密码重置
public String accountReset() throws IOException{
String result="success";
String userid=ServletActionContext.getRequest().getParameter("userid");
HttpServletResponse response=ServletActionContext.getResponse();
response.setContentType("text/json; charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
response.reset();
//根据userid重置密码
Account newAccount=new Account();
newAccount.setPassword("123456"); //重置后的账户密码为123456
newAccount.setId(Integer.valueOf(userid));
if(accountService.pwdreset(newAccount)!=1){
result="密码重置失败！";
}
out.print(result); //返给ajax请求
out.flush();
out.close();
return INPUT;
}
//账号删除
public String accountDelete() throws IOException{
String result="success";
String userid=ServletActionContext.getRequest().getParameter("userid");
HttpServletResponse response=ServletActionContext.getResponse();
response.setContentType("text/json; charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
response.reset();
if(accountService.accountdelete(Integer.valueOf(userid))!=1){
result="删除失败！";
}
out.print(result); //返给ajax请求
out.flush();
out.close();
return INPUT;
}
public TUser getTuser() {
return tuser;
}
public void setTuser(TUser tuser) {
this.tuser = tuser;
}
public void setAccountService(AccountService accountService) {
this.accountService = accountService;
}
}
标签：
原文地址：http://blog.csdn.net/adgjlxxx/article/details/46550325
