展会信息港展会大全

ajax读取数据库内容实现二级联动下拉选择菜单示例
来源:互联网   发布日期:2016-01-26 10:07:21   浏览:3232次  

导读:本文为大家介绍下使用ajax技术读取数据库内容并生成二级联动下拉选择菜单,具体实现如下,感兴趣的朋友可以参考下,希望对大家有所帮助复制代码 代码如下:PRE class=javascript name=code PREPRE cla ...

本文为大家介绍下使用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>

赞助本站

人工智能实验室
AiLab云推荐
推荐内容
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港