需求：点击下拉选项框，选择一个数据类型，在表单中自动显示该类型下所有的数据项的名称，即数据库中同一keyword对应的所有不重复的ddlname。
1.在dictionaryindex.jsp中添加：<script type="text/javascript" src="${pagecontext.request.contextpath }/script/pub.js?1.1.11"></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');
}
}
view code
其中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方法= (req.readystate == 4 (req.status == 200"http error: "+
（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对象集合*/@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;
}
其中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%">
</td>
<td class="ta_01" align="center" width="20%">
<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表单的内容替换。
以上就是dom对象的ajax应用实例详解的详细内容。