相信自己！
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  26 随笔 :: 3 文章 :: 9 评论 :: 0 Trackbacks
无刷新改变数据库的内容 ajax的简单应用
       改变用户名的年龄：
       年龄的显示方法如下：
        <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 北极雪 阅读(879) 评论(1)  编辑  收藏 所属分类: css

评论

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


标题  
姓名  
主页
验证码 *  
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
 
 

推荐图书：
《走出软件作坊》、《悟透JavaScript》、《Head First 设计模式》
相关链接:
网站导航: