Question

ajax工作原理,如何通过ajax实现下拉列表框之间的联动

Answer 1

这个是我看到的，做个备份，大家共享。或许大家觉得简单，别笑话我。原文出处：

http://www.javalaw.cn/forum/read.php?tid=109&fpage=1

ava实现版本：首先选择产品分类，然后选择产品类型
jsp:
1.queryProduct.jsp

CODE:
......
<script type="text/javascript" src="../js/taconite-client.js"></script>
<script type="text/javascript" src="../js/taconite-parser.js"></script>
<script language="javascript">
//选择产品分类
function selectCatalog(vproductCatalog) {
if (vproductCatalog.value == "") {
hint("请先选择产品分类");
} else {
hint("加载中...");
var ajaxRequest = new AjaxRequest("<html:rewrite page="/product/queryProductsAction.do"/>");
ajaxRequest.setQueryString("catalogId=" + vproductCatalog.value);
ajaxRequest.sendRequest();
}
}
function hint(msg) {
var e = document.getElementById("PTypeSelectList");
while (e.childNodes.length > 0) {
e.removeChild(e.childNodes[0]);
}
var option = document.createElement("option");
var text = document.createTextNode(msg);
option.appendChild(text);
e.appendChild(option);
}
</script>
......
<table width="600" border="1" cellpadding="0" cellspacing="0" bordercolor="#E7E7E7">
<tr>
<td bgcolor="#F6F6F6" class="t_1">　产品分类目录
<html:select property="productCatalog" onchange="selectCatalog(this)">
<html:option value ="">请选择产品分类</html:option>
<html:options collection ="productCatalogs" property="value" labelProperty="label"/>
</html:select>
</td>
</tr>
<tr>
<td align="left" class="t_1">　产品类型目录
<html:select property="productType" styleId="PTypeSelectList">
<html:option value ="">请先选择产品分类</html:option>
<html:options collection ="productTypes" property="value" labelProperty="label"/>
</html:select>
<html:submit property="query" value="查 询"/></td>
</tr>
</table>
</html:form>
[Copy to clipboard]

2.showProductType.jsp
CODE:
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="[url]http://java.sun.com/jstl/core[/url]" prefix="c" %>
<%@ taglib uri="/WEB-INF/struts-nested.tld" prefix="nested" %>
<%@ taglib uri="[url]http://taconite.sf.net/tags[/url]" prefix="tac" %>
<tac:taconiteRoot>
<tac:replaceChildren contextNodeID="PTypeSelectList" parseOnServer="false">
<option value="" >请选择产品类型</option>
<nested:iterate id="view" name="productTypes" >
<option value="<nested:write name="view" property="value" />" ><nested:write name="view" property="label" /></option>
</nested:iterate>
</tac:replaceChildren>
</tac:taconiteRoot>
[Copy to clipboard]

action:
CODE:
public class QueryProductsAction extends Action {
public ActionForward execute(ActionMapping mapping,ActionForm form,HttpServletRequest request,HttpServletResponse response) {
......
UtilBusiness utilBusiness = new UtilBusinessImpl();
request.setAttribute("productCatalogs",utilBusiness.getAllProductCatalogs());
int catalogId = 0;
if(request.getParameter("catalogId") != null && request.getParameter("catalogId").length != 0){
catalogId = Integer.parseInt(request.getParameter("catalogId"));
}
request.setAttribute("productTypes",utilBusiness.getAllPTypes(catalogId));
return mapping.findForward("showPType");
......
}
}
[Copy to clipboard]

UtilDaoImpl.java:
CODE:
public List getAllPTypes(int catalogId) throws DaoException{
String getAllProductTypes = "select id,name from productType where catalogId = ?";
Connection con = null;
PreparedStatement ps = null;
ResultSet rs = null;
try {
List list = new ArrayList();
PType pType;
con = super.getConnection();
ps = con.prepareStatement(getAllProductTypes);
ps.setInt(1,catalogId);
rs = ps.executeQuery();
while (rs.next()) {
pType = new PType();
pType.setLabel(rs.getString("name"));
pType.setValue(String.valueOf(rs.getInt("id"));
list.add(pType);
}
return list;
} catch (SQLException sqle) {
sqle.printStackTrace();
} catch (NullPointerException npe) {
npe.printStackTrace();
} finally {
if (null != rs) {
rs.close();
}
if (null != ps) {
ps.close();
}
if (null != con) {
con.close();
}
}