数据字典的设计--4.DOM对象的ajax应用
需求：点击下拉选项框，选择一个数据类型，在表单中自动显示该类型下所有的数据项的名称，即数据库中同一keyword对应的所有不重复的ddlName。
1.在dictionaryIndex.jsp中添加：
<script type="text/javascript" src="${pageContext.request.contextPath }/script/pub.js"></script>
2.调用js的代码:
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'); } }
其中submitActionWithForm方法在pub.js中进行定义。
3.在pub.js中定义5种方法：
（1）Pub.submitActionWithForm方法
/*** * domId：表单Form2的名称 * action：表示URL连接 * sForm：表单Form1的名称 */ Pub.submitActionWithForm=function(domId,action,sForm){ /**第一步：创建Ajax引擎对象*/ var req = Pub.newXMLHttpRequest(); /**第二步：req.onreadystatechange表示事件处理函数（相当于一个监听），用来监听客户端与服务器端的连接状态*/ var handlerFunction = Pub.getReadyStateHandler(req, domId,Pub.handleResponse); req.onreadystatechange = handlerFunction; /**第三步：打开一个连接，要求：如果是POST请求，需要设置一个头部信息，否则此时不能使用req.send()方法向服务器发送数据*/ req.open("POST", action, true); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); /**第四步：向服务器发送数据，格式：name=张三&age=28*/ var str = Pub.getParams2Str(sForm); //传递表单Form1中的元素作为参数给服务器 req.send(str); }
（2）Pub.newXMLHttpRequest方法
/** * 用于创建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; }
xmlreq = new XMLHttpRequest()是Ajax操作的核心对象
（3）Pub.getParams2Str方法
/** * @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; }
（4）Pub.getReadyStateHandler方法
/** * @Description:接收服务器端返回的结果 * @param req:引擎对象 * @param eleid：表单Form2的名称 * @param responseXmlHandler：Pub.handleResponse（函数体） * @returns {Function} */ Pub.getReadyStateHandler =function getReadyStateHandler(req, eleid,responseXmlHandler) { return function () { /** * req.readyState:用来监听客户端与服务器端的连接状态 * 0：表示此时客户端没有调用open()方法 * 1：表示客户端执行open方法，但是send方法没有执行 * 2：open方法执行，send方法也执行 * 3：服务器开始处理数据，并返回数据 * 4：返回数据成功，只有4这个状态，才能获取服务器端返回的结果 */ if (req.readyState == 4) { /** * req.status：表示java的状态码 * 404：路径错误 * 500：服务器异常 * 200：表示没有异常，正常访问数据，只有200这个状态的时候，才能获取服务器端返回的结果 */ if (req.status == 200) { /** * req.responseText:获取服务器端返回的结果，返回的是文本的结果（包括：字符串，json数据） * req.responseXML:获取服务器端返回的结果，返回的是XML数据的结果 */ responseXmlHandler(req.responseText,eleid); } else { alert("HTTP error: "+req.status); return false; } } }
（5）Pub.handleResponse方法
/** * @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; }
接下来就是对Action类的操作，需要到数据库根据keyword查询相应的ddlName。操作：
4.在ElecSystemDDLAction中添加Edit()方法
/** * @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"; }
5.IElecSystemDDLService中声明
List<ElecSystemDDL> findSystemDDLListByKeyword(String keyword);
6.ElecSystemDDLServiceImpl中重写方法
/** * @Name: findSystemDDLListByKeyword * @Description: 根据数据类型名称查询数据字典 * @Parameters: keyword:数据类型名称 * @Return: List：存储ElecSystemDDL对象集合 */ @Override public 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; }
其中findCollectionByConditionNoPage(condition, params, orderby)方法是commonDao实现的根据指定条件，返回查询结果集（不分页）的方法
7.dictionaryEdit.jsp遍历对象的值
<%@taglib uri="/struts-tags" prefix="s"%>
<s:if test="#request.list!=null && #request.list.size()>0"> <s:iterator value="#request.list"> <tr> <td class="ta_01" align="center" width="20%"><s:property value="ddlCode"/></td> <td class="ta_01" align="center" width="60%"> <input id="<s:property value="ddlCode"/>" name="itemname" type="text" value="<s:property value="ddlName"/>" size="45" maxlength="25"></td> <td class="ta_01" align="center" width="20%"> <a href="#" onclick="delTableRow('<s:property value="ddlCode"/>')"> <img src="${pageContext.request.contextPath }/images/delete.gif" width="16" height="16" border="0" style="CURSOR:hand"></a> </td> </tr> </s:iterator> </s:if> <s:else> <tr> <td class="ta_01" align="center" width="20%">1</td> <td class="ta_01" align="center" width="60%"> <input name="itemname" type="text" size="45" maxlength="25"> </td> <td class="ta_01" align="center" width="20%"></td> </tr> </s:else>
效果展示：
完成选择类型列表，实现Form2表单的内容替换。
