DWR无刷新修改HTML中的字段

 JS的工具类

package  beans;

public   class  JSUsersUtil
... {
    public String getResult(String id,String input_name,String input_value)
    ...{
        String result = "";
        String hql = "update Users set "+input_name+"='"+input_value+"' where userid="+id;
        result  = ""+UsersUtil.updateUser(hql);
        return result;
    }
    
    public String getColumnChanged(String id,String column_name)
    ...{
        String changed = "";
        String hql = "select "+column_name+" from Users where userid="+id;
        changed = UsersUtil.getChanged(hql);
        return changed;
    }
}

 

package  beans;

import  java.util.List;

import  org.hibernate.Hibernate;
import  org.hibernate.Session;
import  org.hibernate.Transaction;

public   class  UsersUtil
... {
    private static Session session = null;
    private static Transaction tx = null;
    
    // 更新某个字段
    public static int updateUser(String hql)
    ...{
        session = HibernateSessionFactory.getSession();
        tx = session.beginTransaction();
        int i = session.createQuery(hql).executeUpdate();
        tx.commit();
        HibernateSessionFactory.closeSession();
        return i;
    }
    
    // 获得Users
    public static Users getUser(Integer id)
    ...{
        session = HibernateSessionFactory.getSession();
        Users user = (Users) session.load(Users.class,id);
        Hibernate.initialize(user);
        HibernateSessionFactory.closeSession();
        return user;
    }
    
    //获得所有Users
    public static List getUsers()
    ...{
        List list = null;
        session = HibernateSessionFactory.getSession();
        list = session.createQuery("from Users").list();
        HibernateSessionFactory.closeSession();
        return list;
    }
    
    // 查询修改后的字段
    public static String getChanged(String hql)
    ...{
        session = HibernateSessionFactory.getSession();
        String changed = (String) session.createQuery(hql).list().get(0);
        HibernateSessionFactory.closeSession();
        return changed;
    }
}

JS脚本

 

var  column_name  =   "" ;

// 替换成输入框,并增加了onclick事件,以便更新单独字段.
function  change2Input(object)
... {
    var f_value = object.value;
    var f_id = object.id;
    object.innerHTML = "<input type=text id='"+f_id+"' value='"+f_value+"' name='"+f_id+"' size=6>&nbsp;<input type=button οnclick=toUpdate(); value=Save>";
    object.id = "_"+f_id;//将传入对象的id换成带_的.以免重复id
    column_name = f_id;//为全局变量column_name赋值.
    object.onclick = "";
    removeOnclick();//执行清空onclick,防止用户点击其他lable
}

// 清空所有的onclick事件.
function  removeOnclick()
... {
    var on_object = document.getElementsByTagName("*");//获得所有TagName,循环清空带id的onclick
    for(var i=0;i<on_object.length;i++)
    ...{
        var one_object = on_object[i];
        if(one_object.id!="")
            one_object.onclick = "";
    }
}

// 还原所有的onclick事件.
function  backupOnclick()
... {
    var on_object = document.getElementsByTagName("*");
    for(var i=0;i<on_object.length;i++)
    ...{
        var one_object = on_object[i];
        if(one_object.id!="")
            one_object.onclick = new Function("change2Input(this);");
    }
}

// 更新单独字段.
function  toUpdate()
... {
    var u_id = $("userid").value;
    var f_value = $(column_name).value;
    updateUtil.getResult(u_id,column_name,f_value,callback);
}

// 获得更新后的内容,并且调用DWR生成的getColumnChanged方法.
function  getChanged()
... {
    var u_id = $("userid").value;
    updateUtil.getColumnChanged(u_id,column_name,callback);
}

// callbak方法,判断返回值,以便调用getChanged方法.
function  callback(msg)
... {
    if(msg=="1")
    ...{
        getChanged();
    }
    else if(msg=="0")
    ...{
        alert("保存失败!");
    }
    else
    ...{
        $("_"+column_name).id = column_name;
        backupOnclick();
        $(column_name).value = msg;
        DWRUtil.setValue(column_name,msg);
        column_name = "";
    }
}

JSP页面

 

<% @ page language = " java "  pageEncoding = " GB2312 " %>
<% @ page import = " beans.Users " %>
<% @ page import = " beans.UsersUtil " %>
<%
Integer id  =  Integer.parseInt(request.getParameter( " userid " ));
Users user  =  UsersUtil.getUser(id);
%>
< html >
   < head >
     < title > 测试AJAX </ title >
     < script type = ' text/javascript '  src = ' dwr/interface/updateUtil.js ' ></ script >
     < script type = ' text/javascript '  src = ' dwr/engine.js ' ></ script >
     < script type = ' text/javascript '  src = ' dwr/util.js ' ></ script >
     < script type = " text/javascript "  src = " makeForm.js " ></ script >
     < link href = " mycss.css "  rel = " stylesheet "  type = " text/css "   />
   </ head >
   < body >
     <!--  测试AJAX开始  -->
     < input type = hidden id = userid name = userid value =<%= user.getUserid() %>   />
     < table border = " 0 "  cellspacing = " 0 "  height = " 100 "  width = " 200 " >
       < tr >
         < td >
          用户名:
           < font id = username onclick = change2Input( this ); value = " <%=user.getUsername()%> " ><%= user.getUsername() %></ font >
         </ td >
       </ tr >
       < tr >
         < td >
          密　码:
           < font id = userpwd onclick = change2Input( this ); value = " <%=user.getUserpwd()%> " ><%= user.getUserpwd() %></ font >
         </ td >
       </ tr >
     </ table >
     <!--  测试AJAX结束  -->
   </ body >
</ html >