下面小编跟大家分享ajax读取数据库内容实现二级联动下拉选择菜单示例,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~
代码如下:
PRE class=javascript name="code"/PREPRE class=javascript name="code"—————————————————————这是ajax(javascript)代码———————————————————————————/PREPRE class=javascript name="code"/PREPRE class=javascript name="code"function send_request(callback, urladdress, isReturnData){
var xmlhttp = getXMLHttpRequest();
= function(){
if ( == 4) {//readystate 为4即数据传输结束
try{
if( == 200){
if(isReturnData && isReturnData==true){
callback();
}
}else{
callback("抱歉,没找到此页面:"+ urladdress +"");
}
} catch(e){
callback("抱歉,发送请求失败,请重试 " + e);
}
}
}
("POST", urladdress, true);
();
}
function getXMLHttpRequest() {
var xmlhttp;
if () {
try {
xmlhttp = new XMLHttpRequest();
("")设定以编码识别数据
} catch (e) {}
} else if () {
try {
xmlhttp = new ActiveXObject("");
} catch (e) {
try {
xmlhttp = new ActiveXObject("");
} catch (e) {
try {
xmlhttp = new ActiveXObject("");
} 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-equiv="Content-Type"
content="text/html; charset=UTF-8"titleInsert title here/titlescript type="text/javascript" src="%=request.getContextPath()%/js/xmlhttp.js"/scriptscript type="text/javascript"function getProcess(value) {var process = (\)(function(value2)
{ = value2;}, ""+, true);}/script/headbodydivform action="" method="post" name="form"select name="process" onchange="getProcess()"option value="0" selected请选择流程种类/optionoption value="Y"业务流程/optionoption
value="G"管理流程/optionoption value="Z"支持流程/option/selectdivselect name="smallclass"option value="一级流程名称" selected请选择一级流程名称/OPTION/select/divinput type="submit" value="提交"/form/div/body/html
PRE/PRE
BR
PPRE class=html name="code"PRE class=html name="code"————————————————————————这是服务端action代码——————————————————————————————/PREBR
P/P
PRE/PRE
这里是我的业务逻辑,每个逻辑不同,所以这段代码这只是为了把想要显示的内容放在request范围内,然后return到下一个页面.javabean中有我的MyProcess类和它的属性
P/P
PPRE class=java name="code"public String getProcessType(){
HttpServletRequest request=();
String value=("");
ListMyProcess MyProcesses= ();
for(MyProcess p:MyProcesses){
(());
}
request.setAttribute("list",MyProcesses);
return SUCCESS;
}/PREPRE class=html name="code"/PREPRE class=html name="code"/PREPRE class=html name="code"————————————————————————这是服务端jsp代码——————————————————————————————/PREPRE 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" "/TR/html4/loose.dtd"
html
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
titleInsert 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/PREBR
BR
P/P
P这个过程差不多就这些!/P
PBR
/P
/PRE