Jquery ajax项目实例

来源：互联网发布：unity3d点击图片事件编辑：程序博客网时间：2024/04/27 18:33

本文所用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>

后台代码是应用了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;
}

}

1 1