ajax 页面无刷新更改数据库中的内容

ajax 页面无刷新更改数据库中的内容

ajax 相关 2007-11-19 13:07:32 阅读9 评论0 字号：大中小

用户名的年龄：
       年龄的显示方法如下：
        <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); %>

<!--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);-->

评论

1 楼 zhanyeting 2014-05-26  

[b][/b]