需求：點擊下拉選項框，選擇一個資料類型，在表單中自動顯示該類型下所有的資料項目的名稱，即資料庫中同一keyword對應的所有不重複的ddlName。
<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');
}
}## 其中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);
}/**
* 用于创建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操作的核心對象
/**
* @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;
}= (req.readyState == 4 (req.status == 200"HTTP error: "+
4.在ElecSystemDDLAction中加入Edit()方法
/**
* @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);
7.dictionaryEdit.jsp遍歷物件的值
/**
* @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;
}
<%@taglib uri="/struts-tags" prefix="s"%>
效果展示：
以上是DOM物件的ajax應用實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
