ajax读取数据库内容实现二级联动下拉选择菜单示例

复制代码 代码如下:

  <PRE class=javascript name="code"></PRE><PRE class=javascript name="code">—————————————————————这是ajax(javascript)代码———————————————————————————</PRE><PRE class=javascript name="code"></PRE><PRE class=javascript name="code">function send_request(callback, urladdress, isReturnData){

  var xmlhttp = getXMLHttpRequest();

  xmlhttp.onreadystatechange = function(){

  if (xmlhttp.readyState == 4) {//readystate 为4即数据传输结束

  try{

  if(xmlhttp.status == 200){

  if(isReturnData && isReturnData==true){

  callback(xmlhttp.responseText);

  }

  }else{

  callback("抱歉,没找到此页面:"+ urladdress +"");

  }

  } catch(e){

  callback("抱歉,发送请求失败,请重试 " + e);

  }

  }

  }

  xmlhttp.open("POST", urladdress, true);

  xmlhttp.send(null);

  }

  function getXMLHttpRequest() {

  var xmlhttp;

  if (window.XMLHttpRequest) {

  try {

  xmlhttp = new XMLHttpRequest();

  xmlhttp.overrideMimeType("text/html;charset=UTF-8");//设定以UTF-8编码识别数据

  } catch (e) {}

  } else if (window.ActiveXObject) {

  try {

  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

  } catch (e) {

  try {

  xmlhttp = new ActiveXObject("Msxml2.XMLHttp");

  } catch (e) {

  try {

  xmlhttp = new ActiveXObject("Msxml3.XMLHttp");

  } catch (e) {}

  }

  }

  }

  return xmlhttp;

  }

  </PRE>————————————————————————这是客户端表单jsp代码——————————————————————————————<BR>

  <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib uri="/struts-tags" prefix="s"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"

  content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="<%=request.getContextPath()%>/js/xmlhttp.js"></script><script type="text/javascript">function getProcess(value) {var process = document.getElementById('process');send_request(function(value2)

  {process.innerHTML = value2;}, "getProcessType.action?value="+value, true);}</script></head><body><div><form action="" method="post" name="form"><select name="process" onchange="getProcess(this.value)"><option value="0" selected>请选择流程种类</option><option value="Y">业务流程</option><option

  value="G">管理流程</option><option value="Z">支持流程</option></select><div id="process"><select name="smallclass"><option value="一级流程名称" selected>请选择一级流程名称</OPTION></select></div><input type="submit" value="提交"></form></div></body></html>

  <PRE></PRE>

  <BR>

  <P><PRE class=html name="code"><PRE class=html name="code">————————————————————————这是服务端action代码——————————————————————————————</PRE><BR>

  <P></P>

  <PRE></PRE>

  这里是我的业务逻辑,每个逻辑不同,所以这段代码这只是为了把想要显示的内容放在request范围内,然后return到下一个页面.javabean中有我的MyProcess类和它的属性

  <P></P>

  <P><PRE class=java name="code">public String getProcessType(){

  HttpServletRequest request=ServletActionContext.getRequest();

  String value=request.getParameter("value");

  List<MyProcess> MyProcesses= processService.getProcessByType(value);

  for(MyProcess p:MyProcesses){

  System.out.println(p.getName());

  }

  request.setAttribute("list",MyProcesses);

  return SUCCESS;

  }</PRE><PRE class=html name="code"></PRE><PRE class=html name="code"></PRE><PRE class=html name="code">————————————————————————这是服务端jsp代码——————————————————————————————</PRE><PRE class=html name="code"><%@ page language="java" contentType="text/html; charset=UTF-8"

  pageEncoding="UTF-8"%>

  <%@ include file="/page/share/taglib.jsp"%>

  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  <html>

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>Insert title here</title>

  </head>

  <body>

  <select name="smallclass">

  <option value="一级流程名称" selected>请选择一级流程名称</OPTION>

  <c:forEach items="${list}" var="myprocess">

  <option value="${myprocess.processID}" >

  ${myprocess.name}

  </option>

  </c:forEach>

  </select>

  </body>

  </html></PRE><BR>

  <BR>

  <P></P>

  <P>这个过程差不多就这些!</P>

  <P><BR>

  </P>

  </PRE>