DOMオブジェクトのajax応用例を詳しく解説

<script type="text/javascript" src="${pageContext.request.contextPath }/script/pub.js?1.1.11"></script>

function changetype(){        
          if(document.Form1.keyword.value=="jerrynew"){            
             
               var textStr="<input type=\"text\" name=\"keywordname\" maxlength=\"50\" size=\"24\"> ";
             document.getElementById("newtypename").innerHTML="类型名称：";
             document.getElementById("newddlText").innerHTML=textStr;
             
             
             Pub.submitActionWithForm('Form2','${pageContext.request.contextPath }/system/elecSystemDDLAction_edit.do','Form1');
            
          }else{            var textStr="";
            document.getElementById("newtypename").innerHTML="";
            document.getElementById("newddlText").innerHTML=textStr;             /**
                * 参数一：传递dictionaryIndex.jsp的From2的表单
                * 参数二：传递URL路径地址
                * 参数三：传递dictionaryIndex.jsp的From1的表单
                
                原理：使用Ajax
                * 传递dictionaryIndex.jsp中表单Form1中的所有元素作为参数，传递给服务器，并在服务器进行处理
                * 将处理后的结果放置到dictionaryEdit.jsp中
                * 将dictionaryEdit.jsp页面的全部内容放置到dictionaryIndex.jsp表单Form2中*/Pub.submitActionWithForm('Form2','${pageContext.request.contextPath }/system/elecSystemDDLAction_edit.do','Form1');
          }  
       }

/**
 * @Description:传递表单Form1中的元素作为参数
 * @param sForm：传递表单Form1的名称
 * @returns {String}：使用ajax返回服务器端的参数，传递的就是表单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;
    } 
   return strDiv;
}

/**
 * @Description:将结果返回dictionaryEdit.jsp，并放置到dictionaryIndex.jsp的Form2中
 * @param data：服务器返回的结果
 * @param eleid：表单Form2的名称 */Pub.handleResponse= function handleResponse(data,eleid){      //获取表单Form2的对象  var ele =document.getElementById(eleid);      //将返回的结果放置到表单Form2的元素中  ele.innerHTML = data;
    
}

/**  
    * @Name: edit
    * @Description: 跳转到数据字典编辑页面
    * @Parameters: 无
    * @Return: String：跳转到system/dictionaryEdit.jsp*/public String edit(){//1.获取数据类型String keyword = elecSystemDDL.getKeyword();//2.使用数据类型查询数据字典，返回List<ElecSystemDDL>List<ElecSystemDDL> list=elecSystemDDLService.findSystemDDLListByKeyword(keyword);
        request.setAttribute("list", list);return "edit";
    }

List<ElecSystemDDL> findSystemDDLListByKeyword(String keyword);

/**  
    * @Name: findSystemDDLListByKeyword
    * @Description: 根据数据类型名称查询数据字典
    * @Parameters: keyword:数据类型名称
    * @Return: List：存储ElecSystemDDL对象集合*/@Overridepublic List<ElecSystemDDL> findSystemDDLListByKeyword(String keyword) {//查询条件String condition="";//查询条件对应的参数List<Object> paramsList = new ArrayList<Object>();if(StringUtils.isNotBlank(keyword)){
            condition=" and o.keyword=?";
            paramsList.add(keyword);
        }//传递可变参数Object[] params = paramsList.toArray();//排序Map<String, String> orderby = new  LinkedHashMap<String, String>();
        orderby.put("o.ddlCode", "asc");
        List<ElecSystemDDL> list = elecSystemDDLDao.findCollectionByConditionNoPage(condition, params, orderby);return list;
    }