郁闷的大象

 

关于ASP+ajax异步修改的问题

点击要修改的内容,出现输入框(框中有原先的内容),输入完新的内容后,鼠标点击其他地方,无刷新提交并显示新的内容
我这个代码点击后是出现了文本框,但是改了内容后,点其他地方,他不会提交,一直是文本框,请高手们不吝赐教,最好把代码贴出来,小弟拜谢!~~
<script language="javascript">
    var req;
 var gID;
    function init(){
    if(window.XMLHttpRequest){
        req=new XMLHttpRequest();
    }
    else if(window.ActiveXObject){
       req=new ActiveXObject("Microsoft.XMLHttp");
    }
 }
 
 function changeToInput(id){
     var oId=document.getElementById(id);
  var value=oId.value;
  oId.outerHTML="<input type='text' id='"+id+"' value='"+value+"' onblur=change(this.id) size=3 />"
 }
 
 function change(id){
      var oId=document.getElementById(id);
   var px=oId.value;
   gId=oId.id
   init();
   url="pro_px.asp?id="+id+"&px="+px;
   req.open("GET",url,true);
   req.onreadystatechange=callback;
   req.send(null);
 }
 
 function callback(){
       
  if(4==req.readyState){
    if(200==req.status){
 
       var oId=document.getElementById(gId);
    var value=oId.value;
    oId.outerHTML="<span style='' id='"+gId+"' value='"+value+"' onclick=changeToInput(this.id)>"+value+"</span>"
    }
  }
 }
</script>
  <%do while not rs.eof%>
          <tr class="tdbg">
            <td width="39" align="center" bgcolor="#ECF5FF"><%=rs("id")%></td>
            <td height="90" align="center" valign="middle"  bgcolor="#ECF5FF"><img src="../<%=rs("cpurl")%>" width="100" height="80" border="0" /></td>
            <td align="center" bgcolor="#ECF5FF"><span id="<%=Rs("id")%>"  value="<%=Rs("px")%>" onclick="changeToInput(this.id)"><%=Rs("px")%></span></td>
            <td align="center" bgcolor="#ECF5FF"><%=rs("cpname")%></td>
            <td align="center" bgcolor="#ECF5FF"><%=rs("times")%></td>
            <td width="111" align="center" bgcolor="#ECF5FF">| <a href="pro_modi.asp?ID=<%=rs("id")%>">修改</a> | <a href="pro_Del.asp?ID=<%=rs("ID")%>&Action=Del" onClick="return ConfirmDel();">删除</a></td>
          </tr>
          <%
 i=i+1
       if i>=MaxPerPage then exit do
       rs.movenext
 loop
%>

处理页面
<!--#include file="conn.asp"-->
<%id=request("id")
px=request("px")
set rs=server.createobject("adodb.recordset")
sql="select * from cp where id="&id
rs.open sql,conn,1,3
rs("px")=px
rs.update
end if
rs.close
set rs=nothing
Response.Expires = 0 
Response.Expiresabsolute = Now() - 1 
Response.AddHeader "pragma","no-cache" 
Response.AddHeader "cache-control","private" 
Response.CacheControl = "no-cache"
'-------------------------------------------
response.Charset="GB2312" '//数据返回的编码类型 显示中文数据必须
'-------------------------------------------
%>
 
---------------------------解答------------------------------------
因为不能测试你服务端的程序,所以只对你客户端脚本代码进行了修改,经测试完全能达到你的要求,如果你用以下代码还是有问题,就要检测你的 pro_px.asp 是否正常工作 了!!
<script language="javascript">
 var req;
 var gID;
 function init(){
    if(window.XMLHttpRequest){
        req=new XMLHttpRequest();
    }
    else if(window.ActiveXObject){
       req=new ActiveXObject("Microsoft.XMLHttp");
    }
 }
 
 function changeToInput(id){
 var oId=document.getElementById(id);
 var value=oId.value;
 oId.outerHTML="<input type='text' id='"+id+"' value='"+value+"' onblur=change(this.id) size=10 />"
 }
 
 function change(id){
 var oId=document.getElementById(id);
 var px=oId.value;
 //以下放异步处理代码 因为无测试所以注掉,正式使用请取消注释,并注掉测试代码
 //init();
 gId=oId.id
 //init();
 //url="pro_px.asp?id="+id+"&px="+px;
 //req.open("GET",url,true);
 //req.onreadystatechange=callback;
 //req.send(null);
 callback();//此句是测试代码
 }
 
 function callback(){
 //正式代码请取消以下注释
 //if(4==req.readyState){
  //if(200==req.status){
   var oId=document.getElementById(gId);
   var value=oId.value;
   oId.outerHTML="<span style='' id='"+gId+"' value='"+value+"' onclick=changeToInput(this.id)>"+value+"</span>"
  //}
 //}
 }
</script>
<table border="1" width="600">
   <tr class="tdbg">
  <td width="39" align="center" bgcolor="#ECF5FF">10001</td>
  <td height="90" align="center" valign="middle"  bgcolor="#ECF5FF">112</td>
  <td align="center" bgcolor="#ECF5FF"><span id="10001"  value="aabbc" onclick="changeToInput(this.id)">ccccc</span></td>
  <td align="center" bgcolor="#ECF5FF">aaaa</td>
  <td align="center" bgcolor="#ECF5FF">bbbbb</td>
  <td width="111" align="center" bgcolor="#ECF5FF">| <a href="pro_modi.asp?ID=10001">修改</a> | </td>
   </tr>
</table>
 

posted on 2011-08-16 21:55  郁闷的大象  阅读(302)  评论(0编辑  收藏  举报

导航