??????在上一個(gè)項(xiàng)目中，需要實(shí)現(xiàn)下拉框聯(lián)動(dòng)的動(dòng)態(tài)實(shí)現(xiàn)時(shí)，我使用的是在頁面中一次將所有聯(lián)動(dòng)數(shù)據(jù)裝載，然后再由js實(shí)現(xiàn)。具體如下：
js代碼：
?1
<
script?language
=
"
JavaScript
"
>
?2
var
?onecount;
?3
onecount
=
0
;
?4
subcat
=
new
?Array();
?5
?
<%
?6
?
int
?count
=
0
;
?7
?Iterator?itr?
=
?schoolList.iterator();
?8
while
(itr.hasNext())
?9
{
10
MaxSchoolView?msv?
=
(MaxSchoolView)?itr.next();
11
%>
12
subcat[
<%=
count
%>
]
=
new
?Array(
"
<%=msv.getSchoolName()%>
"
,
"
<%=Integer.parseInt(msv.getSchoolClass())%>
"
,
"
<%=Integer.parseInt(msv.getSchoolNO())%>
"
);
//
產(chǎn)生數(shù)組
13
<%
14
???????count
=
count
+
1
;
15
}
16
%>
17
onecount
=<%=
count
%>
;
18
?
19
function
?changelocation(id)
20
???
{
21
???document.maxSearchForm.smallsortselect.length
=
0
;
22
??????
23
???
var
?idto
=
id;
24
???
var
?i;
25
???document.maxSearchForm.smallsortselect.options[
0
]
=
new
?Option('請(qǐng)選擇學(xué)校','');
26
???
for
(i
=
0
;i
<
onecount;i
++
)
27
???????
{
28
???????????
if
(subcat[i][
1
]
==
idto)
29
???????????
{
30
???????????????document.maxSearchForm.smallsortselect.options[document.maxSearchForm.smallsortselect.length]
=
new
?Option(subcat[i][
0
],subcat[i][
2
]);
31
???????????}
???????
32
???????}
33
34
??
35
???????
36
???}
?????
37
???
38
</
script
>
??????頁面中的下拉框代碼：
????
<
select?
id?
=bigsortselect"?
name
="bigsortselect"
????????onChange
="changelocation(document.maxSearchForm.bigsortselect.options[document.maxSearchForm.bigsortselect.selectedIndex].value)"
????????size
="1"
>
????????
<
option?
value
="3"
>
請(qǐng)選擇學(xué)校分類
</
option
>
????????
<
option?
value
="0"
>
本科學(xué)校
</
option
>
????????
<
option?
value
="1"
>
專科學(xué)校
</
option
>
????????
<
option?
value
="2"
>
獨(dú)立學(xué)院
</
option
>
????
</
select
>
????
<
select?
name
="smallsortselect"
?id?
=smallsortselect"
>
????????
<
option?
value
="0"
?selected
>
請(qǐng)選擇學(xué)校
</
option
>
????
</
select
>
這種實(shí)現(xiàn)方式過去比較普遍，不過有了AJAX以后，我們可以大量精減我們的頁面代碼，同時(shí)配合taglib，可以完全消除以上實(shí)現(xiàn)方式頁面中的java代碼。
如下：
<script?type="text/javascript">???????
function?getResult(stateVal)?{
?var?url?=?"select?type=login®ionNO="+stateVal;?
?if?(window.XMLHttpRequest)?{?
?req?=?new?XMLHttpRequest();?
?}else?if?(window.ActiveXObject)?{?
?req?=?new?ActiveXObject("Microsoft.XMLHTTP");?
?}?
?if(req){?
?req.open("GET",url,?true);?
?req.onreadystatechange?=?complete;?
?req.send(null);?
?}?
}?
function?complete(){
?if?(req.readyState?==?4)?{?
?if?(req.status?==?200)?{?
????????????var?xmlDoc=req.responseXML.documentElement;
????????????var?xSel=xmlDoc.getElementsByTagName('select');
????????????var?select_root=document.getElementById('schoolNO');
????????????select_root.options.length=0;
????????????var?option=new?Option('--請(qǐng)選擇用戶--','0');
????????????select_root.add(option);
????????????for(var?i=0;i<xSel.length;i++)
????????????{
????????????????var?xValue=xSel[i].childNodes[0].firstChild.nodeValue;
????????????????var?xText=xSel[i].childNodes[1].firstChild.nodeValue;
????????????????var?option=new?Option(xText,xValue);
????????????????try{
????????????????????select_root.add(option);
????????????????}catch(e){
????????????????}
????????????}
????????????}
????????????}
}
</script> 下拉框代碼：
????????????????????????????<TR>
????????????????????????????????<TD>
????????????????????????????????????<label?for="name">
????????????????????????????????????????用戶：
????????????????????????????????????</label>
????????????????????????????????????<twy:sportsitem?regionNO="topAdmin"?/>
????????????????????????????????</TD>
????????????????????????????</TR>
????????????????????????????<TR>
????????????????????????????????<TD>
????????????????????????????????????
????????????????????????????????????<select?id="schoolNO"?name="schoolNO">
????????????????????????????????????????<option?value="0">
????????????????????????????????????????????--請(qǐng)選擇用戶--
????????????????????????????????????????</option>
????????????????????????????????????</select>
????????????????????????????????</TD>
????????????????????????????</TR> 這里結(jié)合了自定義taglib，可以對(duì)比前后兩種下拉框聯(lián)動(dòng)的實(shí)現(xiàn)方式，可以發(fā)現(xiàn)第二種消滅了原來jsp中的java代碼，實(shí)現(xiàn)了我一直所追求的頁面和代碼解耦。
?????????那么，這個(gè)AJAX的使用，究竟是怎么一回事呢？其實(shí)道理非常簡(jiǎn)單，不用說太多原理，通過代碼就可以體會(huì)。上面貼出來的js代碼，就是一個(gè)傳統(tǒng)的AJAX使用方式，通過建立與服務(wù)器的異步XML通信，取得數(shù)據(jù)后，對(duì)頁面中的下拉框進(jìn)行渲染。與這段代碼通信的是一個(gè)servlet，代碼如下：
import?java.io.IOException;
import?java.io.PrintWriter;
import?java.util.List;
import?javax.servlet.ServletException;
import?javax.servlet.http.HttpServlet;
import?javax.servlet.http.HttpServletRequest;
import?javax.servlet.http.HttpServletResponse;
import?org.springframework.web.context.support.WebApplicationContextUtils;
import?org.twy.dao.SchoolDAO;
import?org.twy.dao.ibatis.helper.SchoolQueryHelperBean;
import?org.twy.model.School;
import?org.twy.sys.Constants;
import?org.twy.utils.StringUtils;
/**?*//**
?*?
?*?@author?lanluquan
?*
?*/
@SuppressWarnings("serial")
public?class?SelectSchoolServlet?extends?HttpServlet?{
????public?SelectSchoolServlet()?{
????????super();
????}
????public?void?destroy()?{
????????super.destroy();
????}
????public?void?doGet(HttpServletRequest?request,?HttpServletResponse?response)
????????????throws?ServletException,?IOException?{
????????response.setContentType("text/xml");
????????response.setHeader("Cache-Control",?"no-cache");
????????//需要設(shè)置utf-8?在客戶端的javascript才可以正確識(shí)別
????????response.setCharacterEncoding("utf-8");
????????String?regionNO?=?request.getParameter("regionNO");
????????String?type?=?request.getParameter("type");
????????SchoolDAO?sdao?=?(SchoolDAO)?WebApplicationContextUtils
????????????????.getRequiredWebApplicationContext(getServletContext()).getBean(
????????????????????????"schoolDAO");
????????SchoolQueryHelperBean?sqhb?=?new?SchoolQueryHelperBean(null,
????????????????StringUtils.strTOLong(regionNO),?null,?null,?null);
????????List?schools?=?sdao.getSchools(sqhb,?0,?Constants.MAXNUM);
????????StringBuffer?sb?=?new?StringBuffer("<selects>");
????????if(type!=null?&&?type.equals("login")){
????????????sb.append("<select><value>1</value><text>地級(jí)市管理員</text></select>");
????????}
????????School?s?=?null;
????????for?(Object?o?:?schools)?{
????????????s?=?(School)?o;
????????????sb.append("<select><value>"+s.getSchoolNO()+"</value><text>"+s.getSchoolName()+"</text></select>");
????????}
????????
????????sb.append("</selects>");
????????//String?xml?=?sb.toString();
????????//new?String(xml.getBytes("GBK"),?"UTF-8");//ISO-8859-1
????????//System.out.println(sb);
????????PrintWriter?out?=?response.getWriter();
????????out.write(sb.toString());
????????out.close();
????}
在這個(gè)servlet中，將得到的數(shù)據(jù)list，組裝成xml，返回給頁面，以此來實(shí)現(xiàn)動(dòng)態(tài)刷新下拉框的效果。