相信自己!

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  26 随笔 :: 3 文章 :: 13 评论 :: 0 Trackbacks
       改变用户名的年龄:
       年龄的显示方法如下:
        <td bgcolor="#F2F2F2" align='center'>
 <span id="<%=user.getId()%>" style="background:red" onclick="changeToInput(this.id)" value="<%=user.getAge()%>">    <%=user.getAge()%>     </span></td>
    changeToInput(this.id)方法如下:

        
<script type="text/javascript">
            
var req;
            
var gID;
            
function changeToInput(id) {
                
var oNP = document.getElementById(id);
                
var value = oNP.value;
                oNP.outerHTML 
= "<input type='text' id='" + id + "' value='" + value + "' size='5' onblur='change(this.id)'>";
                document.getElementById(id).focus();
            }

            
            
function change(id) {
                
var oNP = document.getElementById(id);
                
var value = oNP.value;
                gID 
= id;
                init();
                
var url = "ChangeAge.jsp?id=" + escape(id) + "&age=" + value;
                req.open(
"GET", url, true);
                req.onreadystatechange 
= callback;
                req.send(
null);
                
            }

            
            
function init() {
                
if(window.XMLHttpRequest) {
                    req 
= new XMLHttpRequest();
                }
 else if (window.ActiveXObject) {
                    req 
= new ActiveXObject("Microsoft.XMLHTTP");
                }

            }

            
            
function callback() {
                
if(4 == req.readyState) {
                
                    
if(200 == req.status) {
                
                        
var oNP = document.getElementById(gID);
                        
var value = oNP.value;
                        oNP.outerHTML 
= "<span style='background:gray' id='" + gID + "' value='" + value + "' onclick='changeToInput(this.id)'>" + value + "</span>";
                    }

                }

                
            }

            
        
</script>
        
       ChangAge.jsp页面代码如下:
            
<%@ page language="java" import="org.mxg.dao.impl.*, org.mxg.dao.*,java.util.*" pageEncoding="gbk"%>
<%
int id = Integer.parseInt(request.getParameter("id"));
int age = Integer.parseInt(request.getParameter("age"));
IUserDAO userDAO 
= new UserDAO();
userDAO.UpdateAgeById(age,id);
//调用DAO的方法更新年龄



response.setContentType(
"text/html;charset=gbk");
response.setHeader(
"Cache-Control""no-store"); //HTTP1.1//阻止浏览器存储内容!
response.setHeader("Pragma""no-cache"); 
response.setDateHeader(
"Expires"0); %>

    这样就实现了:在前台直接用鼠标点击年龄的文本框就可以直接更改了!
    
   
    
  
posted on 2007-11-10 17:44 北极雪 阅读(1301) 评论(1)  编辑  收藏 所属分类: css

评论

# re: 无刷新改变数据库的内容 ajax的简单应用 2007-11-10 19:54 wukaichun
对Ajax又有了点了解.简单易懂~`支持(:~`  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: