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>


您可能感兴趣的文章:

  • PHP+ajax实现二级联动菜单功能示例
  • ajax三级联动下拉菜单效果
  • AJAX省市区三级联动下拉菜单(java版)
  • ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
  • Ajax二级联动菜单实现原理及代码
  • 基于asp+ajax和数据库驱动的二级联动菜单
  • 一个强健 实用的asp+ajax二级联动菜单(有演示和附源程序打包下载)
  • 落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
  • 琥珀无限级分类联动菜单AJAX版
  • Ajax实现二级联动菜单
张贴在3