【电力项目】pub.js实现替换form表单的innerHTML

目的：角色类型切换的时候下面的权限分配不同的checkbox被勾中以及显示用户分配

切换前

切换后

第一步

/**
传递的参数：
  domId：传递表单中Form2的名称
  action：请求的路径    'system/elecRoleAction_edit.do'  这个请求最终返回的是一个roleEdit.jsp的页面 去除<%@ page language="java" pageEncoding="UTF-8"%>
  sForm：传递表单中Form1的名称
*/
Pub.submitActionWithForm=function(domId,action,sForm){
  var req = Pub.newXMLHttpRequest();
  var handlerFunction = Pub.getReadyStateHandler(req, domId,Pub.handleResponse);
  req.onreadystatechange = handlerFunction;
  req.open("POST", action, false);
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
  var str = Pub.getParams2Str(sForm); 
  //传递的是以Form1的属性值做为参数
  //alert(str);
  req.send(str);
}

/**创建Ajax引擎*/
Pub.newXMLHttpRequest=function newXMLHttpRequest() {
  var xmlreq = false;
  if (window.XMLHttpRequest) {
    xmlreq = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try {
      xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) {
      try {
        xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e2) {
        alert(e2);
      }
    }
  }
  return xmlreq;
}

/**
req:ajax引擎
eleid：表单中form2的名称
responseXmlHandler：表示Pub.handleResponse函数
*/
Pub.getReadyStateHandler =function getReadyStateHandler(req, eleid,responseXmlHandler) {
  return function () {
    if (req.readyState == 4) {
      if (req.status == 200) {

       //req.responseText 就是请求的路径    'system/elecRoleAction_edit.do' 返回的结果
        responseXmlHandler(req.responseText,eleid);
      } else {
        alert("HTTP error: "+req.status);
        return false;
      }
    }
  }
}

最终执行这个function

/**
data:服务器端返回的结果 
eleid：表单值Form2的名称
*/
Pub.handleResponse= function handleResponse(data,eleid){
      //alert(data);
      //获取Form2的对象
      var ele =document.getElementById(eleid);
      //alert(data);

     //返回的是roleEdit.jsp  最终传给Form2，也就是Form2的内部html布局
      ele.innerHTML = data;
    
}

/**
sForm:表单中Form1的名称
*/
Pub.getParams2Str=function getParams2Str(sForm){
 var strDiv="";
 try {
    var objForm=document.forms[sForm];
  if (!objForm)
    return strDiv;
  var elt,sName,sValue;
  for (var fld = 0; fld < objForm.elements.length; fld++) {
      elt = objForm.elements[fld];    
      sName=elt.name;
      sValue=""+elt.value;
      if(fld==objForm.elements.length-1)
          strDiv=strDiv + sName+"="+sValue+"";
       else   
          strDiv=strDiv + sName+"="+sValue+"&";
   }
  }
  catch (ex) {
    return strDiv;
}
   //alert(strDiv);
   return strDiv;
}