AJAX初体验 在线编辑

主要实现的功能如下：对查询的出来的数据能够直接点击编辑，对于需要编辑的字段根据需要显示文本框、下拉框或者提示不允许修改，编辑完成后回车或者让文本框或下拉框失去焦点即可实现对数据库的更新，文本框或下拉框也随之消失变成普通的文本。

<!--editOnline.jsp-->
<script>
var xmlHttp ; 
createXDOM();
function createXDOM() {   
    if(window.XMLHttpRequest) {   

        xmlHttp = new XMLHttpRequest;      

    } else if (window.ActiveXObject) {   

        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");   
    } else {   

        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
    }       
}
function EditCells(thisCells,key, int_id)
{
	var elements= thisCells.getElementsByTagName("input");
	if(elements!=null&&elements.length>0){
	originalvalue = elements[0].value;
	}else{
		originalvalue = thisCells.innerHTML;
		}
    var CellText= thisCells.innerHTML;
    if(CellText.substring(0,1)!="<")
    {

      if(key=="address_use_type"||key=="address_section_type"){
          	var url = "<c:out value='${pageContext.request.contextPath}'/>getSelectList.action?tdName="+key+"&resClassName="+frmExecuteQuery.resClassName.value+"&tdId=TextBox1"+thisCells.id+"&tdValue="+thisCells.value+"&int_id="+int_id; 
    		xmlHttp.open("post",url,false); 
    		var param = ""; 
   			xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
   			xmlHttp.send(param);
   			//xmlHttp.onreadyStatechange=getResult(thisCells); 
   			thisCells.innerHTML=xmlHttp.responseText;
   			document.getElementById('selectBoxTextBox1'+thisCells.id).focus();
        }else if(key=="date"||key=="city_id"){
        alert("此属性不允许被修改！");
        }else{
            thisCells.innerHTML="<input type=\"text\" id=\"TextBox1"+thisCells.id+"\" value=\""+thisCells.innerHTML+"\" onblur=\"thisTextBoxOnblur(this,'"+key+"',"+ int_id+")\" onkeydown=\"enterkey(this,'"+key+"',"+ int_id+")\"/>";
       		document.getElementById("textBox1"+thisCells.id).focus();
        }
    }
}
function enterkey(thisTextBox,key, int_id){
if(   event.keyCode   ==   13)  
      {  
        thisTextBoxOnblur(thisTextBox,key, int_id);
      } 
}
function enterkey1(selectList,key, int_id){
if(   event.keyCode   ==   13)  
      {  
      thisSelectOnblur(selectList,key, int_id);
      } 
}
function getResult(thisCells)
    {
     if(xmlHttp.readyState==4) {  
           thisCells.innerHTML=xmlHttp.responseText;  
        } 
    }   
function thisTextBoxOnblur(thisTextBox,key, int_id)
    {
    if(key=="start_address"||key=="end_address"||key=="address_section"||key=="address"||key=="end_ip"){
  	 checkip(thisTextBox,originalvalue);//checkip的代码省略，网上有很多校验Ip的代码
    }
    if(key=="mask"||key=="mask2"){
    var textValue = thisTextBox.value;
    if(textValue.match("^[1-9][0-9]*$")==null){
    alert("掩码输入不正确，争取格式为XX,如20");
    thisTextBox.value=originalvalue;
    }
    }
    	var resClassName = document.getElementsByName("resClassName")[0];
        var thisCellsID=thisTextBox.id;
        thisCellsID=thisCellsID.substring(8);
        document.getElementById("HValue").value=thisTextBox.value;
        document.getElementById(thisCellsID).innerHTML=document.getElementById("HValue").value;
        var url = "<c:out value='${pageContext.request.contextPath}'/>updateData.action?tdName="+key+"&tdValue="+thisTextBox.value+"&int_id="+int_id+"&resClassName="+frmExecuteQuery.resClassName.value; 
    xmlHttp.open("get",url,false); 
    var param = "";  
   	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
    xmlHttp.send(param);  
    }
 function thisSelectOnblur(selectList,key, int_id)
    {
    //alert(selectList.sel.value);
    	var resClassName = document.getElementsByName("resClassName")[0];
        var thisCellsID=selectList.id;
        thisCellsID=thisCellsID.substring(17);
        var url = "<c:out value='${pageContext.request.contextPath}'/>updateData.action?tdName="+key+"&tdValue="+selectList.value+"&int_id="+int_id+"&resClassName="+frmExecuteQuery.resClassName.value; 
        document.getElementById("HValue").value=selectList.value;
        document.getElementById(thisCellsID).innerHTML=document.getElementById("HValue").value;
    xmlHttp.open("get",url,false); 
    var param = "";  
   	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
    xmlHttp.send(param);  
    }   
 }
</script>
<body>
<ww:form name="frmExecuteQuery" action="" method="post">
<input type="hidden" id="HValue" />
<ww:hidden name="resClassName" />
<%
for (int j = 0; j < indexList.size(); j++) {
											NameValue index = (NameValue) indexList.get(j);
	String tdValue = resDela.getValue(index.getId())+ "";
	String tdName = index.getId() + "";
	String css = "";
	if (index.getId().equals(fixColumn))
	css = "class='fixleft'";
	if (!index.getId().equals("int_id")) {
%>
<ww:if test="parentClassName=='IP_ADDRESS'">
	<td id=<%=i + "" + j%> <%=css%>
onClick="EditCells(this,'<%=tdName%>',<%=resDela.getValue("int_id")%>)"><%=tdValue%></td>
</ww:if>
<ww:else>
<td <%=css%>><%=tdValue%></td>
</ww:else>
<%
    }
}
%>
</ww:form>
</body>

<!--options.jsp-->
  <%@page contentType="text/html; charset=GBK"%>
  <%@taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
  <select id="selectBox<c:out value='${tdId }'/>" name='sel' onblur="thisSelectOnblur(this,'<c:out value='${tdName }'/>',<c:out value='${int_id }'/>)"  onkeydown="enterkey1(this,'<c:out value='${tdName }'/>',<c:out value='${int_id }'/>)">
  <c:forEach items="${list}" var="obj">
  <option value="<c:out value='${obj.id}'/>"><c:out value="${obj.name}"/></option>
  </c:forEach>
  </select>

package com.abc
//import略
public class MyAction extends ActionSupport implements ServletRequestAware,ServletResponseAware {

/*
*getSelectList.action
*查询属性的下拉菜单内容
*/
public String getSelectList()throws Exception{
       List list = null;
       //获取菜单内容List，代码略
       servletRequest.setAttribute("list", list);
       servletRequest.setAttribute("int_id", int_id);
       return "options";
}

/*
*getSelectList.action
*/
 public String updateData() throws Exception{
    	//更新数据库，代码略
    	return "online";
    }

<xwork>
  <include file="webwork-default.xml" />
<!interceptors省略>
<action name="maintain" class="com.abc.MyAction">
<result name="online">editOnline.jsp</result>
 <result name="options">options.jsp</result>
 </action>
</xwork>