点击td转换成input，失去焦点时发送修改数据

html：

<script type="text/javascript">
var req;
var gID;
var bak;//备份一份
function changeToInput(id){
	var oNP=document.getElementById(id);
	var value = oNP.value;
	oNP.outerHTML="<input type='text' id='"+id+"'value='"+value+"' size='20' onblur='change(this.id)'>"
	document.getElementById(id).focus();
	bak = value;
}
function change(id){
	var oNP=document.getElementById(id);
	var value = oNP.value;
	if(value==bak){//如果数据没有更改，则还原到span
		oNP.outerHTML="<span id='"+id+"' value='"+value+"' onclick='changeToInput(this.id)'>"+value+"</span>";
		return;
	}
	gID=id;
	
	init();
	var url="manage.portal?action=updatePayout&id="+id+"&type="+value;
	url=encodeURI(url); 
   	url=encodeURI(url);//写一个不行。如果写一个就是？？？？号。写2个，则输出 %df%a4这种.
                           
	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("Micrsoft.XMLHTTP");
	}
}
function callback(){
 if(req.readyState==4){
  if(req.status==200){
  	var oNP=document.getElementById(gID);
  	var value=oNP.value;
  	oNP.outerHTML="<span id='"+gID+"' value='"+value+"' onclick='changeToInput(this.id)'>"+value+"</span>";
  }
 }
}
</script>

//html部分
<td>
	<div align="center">
		<span id=<bean:write name="item" property="id"/>  onclick="changeToInput(this.id)" value=<bean:write name="item" property="type"/>>
		<bean:write name="item" property="type"/>
</span>
	 </div>
 </td>

java代码片段:

if("updatePayout".equals(form.getAction())){
			String id=request.getParameter("id");
			String type=request.getParameter("type");
			try {
				id=java.net.URLDecoder.decode(id,"UTF-8");
				type=java.net.URLDecoder.decode(type,"UTF-8");//chinese <-->English
			} catch (UnsupportedEncodingException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}//chinese <-->English
			Payouttype payouttype=this.getManageService().getPayouttype(id);
			payouttype.setType(type);
			this.getManageService().update(payouttype);
			System.out.println("------------更新成功------------");
			initPayoutTypeList(mapping,form,request,response);
			return mapping.findForward("payoutManage");
		}