ajaxtag实现级联下拉框的例子

ajaxtag的版本是1.3 beta rc7;

package com.work.ganjian;



import java.util.List;



import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;



import org.ajaxtags.servlets.BaseAjaxServlet;

import org.ajaxtags.xml.AjaxXmlBuilder;

import org.apache.commons.logging.Log;

import org.apache.commons.logging.LogFactory;



import com.work.core.spring.MyBeanUtil;

import com.work.ganjian.model.Xjjgzylb;

import com.work.ganjian.xjjgzylb.XjjgzylbServiceDao;



/**

 * 级联下拉框,根据企业的id来查找下面对应的茧站的信息。

 * 

 * @author wangmingjie

 * 

 */

public class GetJianZhanServlet extends BaseAjaxServlet {



	/**

	 * 

	 */

	private static final long serialVersionUID = -8720069517080929174L;

	private static Log log = LogFactory.getLog(GetJianZhanServlet.class);



	/*

	 * (non-Javadoc)

	 * 

	 * @see org.ajaxtags.servlets.BaseAjaxServlet#getXmlContent(javax.servlet.http.HttpServletRequest,

	 *      javax.servlet.http.HttpServletResponse)

	 */

	public String getXmlContent(HttpServletRequest request,

			HttpServletResponse response) throws Exception {



		String xjqyid = request.getParameter("xjqyid"); // 首先获取参数



		String emptyFlag = request.getParameter("emptyFlag"); // 是否有空选项

		boolean flag = false;

		if (emptyFlag == null || emptyFlag.trim().equals("")) {

			flag = false;

		} else if (emptyFlag.trim().equals("true")) {

			flag = true;

		} else {

			flag = false;

		}



		AjaxXmlBuilder xml = new AjaxXmlBuilder();

		if (flag)

			xml.addItem("请选择", "");

		if (xjqyid == null || "".equals(xjqyid.trim())) {

			return xml.toString();// 返回xml

		}

		XjjgzylbServiceDao xjjgzylbServiceDao = (XjjgzylbServiceDao) MyBeanUtil

				.getBean("xjjgzylbServiceDao");



		List<Xjjgzylb> xjjgzylbs = xjjgzylbServiceDao

				.getXjjgzylbsByXjqyId(xjqyid);

		for (Xjjgzylb xjjgzylb : xjjgzylbs) {

			xml.addItem(xjjgzylb.getMc(), xjjgzylb.getId());

		}

		log.debug("查询到了" + xml.toString());

		return xml.toString();// 返回xml

	}



}
在web.xml配置servlet
	<servlet>

		<servlet-name>GetJianZhanServlet</servlet-name>

		<servlet-class>

			com.work.ganjian.GetJianZhanServlet

		</servlet-class>

	</servlet>

	<servlet-mapping>

		<servlet-name>GetJianZhanServlet</servlet-name>

		<url-pattern>/GetJianZhanServlet</url-pattern>

	</servlet-mapping>
编写jsp文件
<%@ page contentType="text/html; charset=UTF-8"%>

<%@taglib prefix="s" uri="/struts-tags"%>

<%@ taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax" %>

<% 

response.setHeader("Pragma", "No-cache");

response.setHeader("Cache-Control", "no-cache");

response.setDateHeader("Expires", 0);

%>

<html>

<head>

<title>用户登陆</title>

<link href="${pageContext.request.contextPath}/css/styleqxgl.css" rel="stylesheet" type="text/css">

<script type="text/javascript">

function refresh(){

	document.getElementById("authImage").src='<s:url value="/authImage" />?now=' + new Date();

	//增加参数是为了防止缓存图片

}

function bringToTop() {

    if( self != top ) {

      top.location.href = self.location.href;

    }

}	

function init(){

	document.forms[0].userAccount.focus();

}

</script>

<link rel="stylesheet" type="text/css" href="<s:url value="/css/ajaxtags/ajaxtags.css" />" />

<link rel="stylesheet" type="text/css" href="<s:url value="/css/ajaxtags/displaytag.css" />" />

<script type="text/javascript" src="<s:url value="/js/ajaxtags/prototype.js" />"></script>

<script type="text/javascript" src="<s:url value="/js/ajaxtags/scriptaculous/scriptaculous.js" />"></script>

<script type="text/javascript" src="<s:url value="/js/ajaxtags/overlibmws/overlibmws.js" />"></script>

<script type="text/javascript" src="<s:url value="/js/ajaxtags/overlibmws/overlibmws_crossframe.js" />"></script>

<script type="text/javascript" src="<s:url value="/js/ajaxtags/overlibmws/overlibmws_iframe.js" />"></script>

<script type="text/javascript" src="<s:url value="/js/ajaxtags/overlibmws/overlibmws_hide.js" />"></script>

<script type="text/javascript" src="<s:url value="/js/ajaxtags/overlibmws/overlibmws_shadow.js" />"></script>

<script type="text/javascript" src="<s:url value="/js/ajaxtags/ajax/ajaxtags.js" />"></script>

<script type="text/javascript" src="<s:url value="/js/ajaxtags/ajax/ajaxtags_controls.js" />"></script>

<script type="text/javascript" src="<s:url value="/js/ajaxtags/ajax/ajaxtags_parser.js" />"></script>

  

</head>

<body>

<select name="xjjgzsgl.xjqy.id" id="xjqyid">

    <option value="">请选择</option>

    <option value="100c9a73f9894e259164cfd7a6b0b261">XX丝绸厂</option>

    <option value="402881601a2f37a6011a2f37a6e40000">XXX茧站XXX企业</option>

</select>



<select id="xjjgzylbid" disabled="disabled">

  <option value="">请选择茧站</option>

</select>



<br>

<input type="button" class="button11" value="获取页面内容" onclick="getHtml()">

<div>

	<textarea id="htmlContent" rows="10" cols="90"></textarea>	

</div>

<span id="progressMsg" style="display:none;"><img alt="Indicator" src="<s:url value="/images/ajaxtags/indicator.gif" />" /> Loading...</span>

		

<div id="errorMsg" style="display:none;border:1px solid #e00;background-color:#fee;padding:2px;margin-top:8px;width:300px;font:normal 12px Arial;color:#900"></div>

	

<script type="text/javascript">

function getHtml(){

	//alert(document.body.innerHTML )	;

	//htmlContent.innerHTML = document.body.innerHTML;

	htmlContent.value = document.body.innerHTML;

}

 /*

  * USER DEFINED FUNCTIONS

  */

function initProgress() {

  Element.show('progressMsg');

}

function resetProgress() {

  // show marker emblem

  var index = $('xjqyid').selectedIndex;

  var automaker = $('xjqyid').options[index].text;

  Effect.Fade('progressMsg');

}



function reportError() {

  if ($('xjjgzylbid').options.length == 0) {

    $('errorMsg').innerHTML = "级联更新失败!";

  }

  Element.show('errorMsg');

  setTimeout("Effect.DropOut('errorMsg')", 2500);

}



</script>

<ajax:select

  baseUrl="${pageContext.request.contextPath}/GetJianZhanServlet"

  source="xjqyid"

  target="xjjgzylbid"

  parameters="xjqyid={xjqyid},emptyFlag=true"

  preFunction="initProgress"

  emptyOptionName="请选择茧站"

  emptyOptionValue=""

  postFunction="resetProgress"	

  errorFunction="reportError" />

  

 	

</body>

</html>

你可能感兴趣的:(JavaScript,Ajax,xml,css,servlet)