下拉条的连动-ajax方式
客户端触发:
<select id="category1" onchange="changecategory()">
<option value="-1">所有一级类别</option>
<%
for(int i=0; i<topCategorys.size(); i++) {
Category c = topCategorys.get(i);
%>
<option value="<%=c.getId() %>"><%=c.getName() %></option>
<%
}
%>
</select>
<select id="category2">
<option value="-1">所有二级类别</option>
</select>
创建XHR:
<script type="text/javascript">
var req;
function changecategory() {
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
var id = document.getElementById("category1").options[document.getElementById("category1").selectedIndex];
var url = "getchildcategory.jsp?id=" + escape(id.value);
req.open("GET", url, true);
req.onreadystatechange=callback;
req.send(null);
}
function callback() {
if (req.readyState == 4) {
if (req.status == 200) {
//parseXml(req.responseXML);//方式1:XML方式(太麻烦)
//parse(req.responseText);//方式2:字符方式(最常用)
eval(req.responseText);//方式3:动态生成javascript方式(最常用)
}
}
}
function parseXml(msg) {
var categorys = msg.getElementsByTagName("categorys")[0];
//alert(categorys.childNodes.length);
document.getElementById("category2").length=categorys.childNodes.length+1;
document.getElementById("category2").selectedIndex=0;
for(var i=0; i<categorys.childNodes.length; i++) {
var category = categorys.childNodes[i];
var id = category.childNodes[0].childNodes[0].nodeValue;
//alert(id);
var name = category.childNodes[1].childNodes[0].nodeValue;
//alert(name);
document.getElementById("category2").options[i+1].value=id;
document.getElementById("category2").options[i+1].text=name;
}
}
function parse(msg) {
//alert("|" + msg + "|");
msg = msg.replace(/(^\s*)|(\s*$)/g, "");
if(msg == null || new String(msg) == "") {
return;
}
var categorys = msg.split("-");
for(var i=0; i<categorys.length; i++) {
var category = categorys[i].split("&");
var id = category[0];
var name = category[1];
document.getElementById("category2").length=categorys.length+1;
document.getElementById("category2").selectedIndex=0;
document.getElementById("category2").options[i+1].value=id;
document.getElementById("category2").options[i+1].text=name;
}
}
</script>
server处理方式(getchildcategory.jsp中的内容),返回包含处理结果的javascript代码:
<%
String strId = request.getParameter("id");
int id = -1;
if(strId != null && !strId.trim().equals("")) {
id = Integer.parseInt(request.getParameter("id"));
}
Category parent = CategoryMgr.getInstance().loadById(id);
List<Category> childs = parent.getChilds();
StringBuffer buff = new StringBuffer();
//方式1:XML方式
/*
for(int i=0; i<childs.size(); i++) {
Category c = childs.get(i);
buff.append("<category><id>" + c.getId() + "</id><name>" + c.getName() + "</name></category>");
}
buff.insert(0,"<categorys>");
buff.append("</categorys>");
*/
//方式2:字符方式
/*
for(int i=0; i<childs.size(); i++) {
Category c = childs.get(i);
buff.append(c.getId() + "&" + c.getName() + "-");
}
if(childs.size() > 0){
buff.deleteCharAt(buff.length()-1);
}
*/
//方式3:动态生成javascript方式
for(int i=0; i<childs.size(); i++) {
Category c = childs.get(i);
buff.append("document.getElementById('category2').options[" + (i+1) + "].value=" + c.getId() + ";\n");
buff.append("document.getElementById('category2').options[" + (i+1) + "].text='" + c.getName() + "';\n");
}
buff.insert(0, "document.getElementById('category2').selectedIndex=0;\n");
buff.insert(0, "document.getElementById('category2').length=" + (childs.size()+1) +";\n");
System.out.println(buff.toString());
//可以采用清除缓存的方法,如下
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-store"); //HTTP1.1
response.setHeader("Pragma", "no-cache"); //HTTP1.0
response.setDateHeader("Expires", 0);
response.getWriter().write(buff.toString());
%>