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

所属分类: 网络编程 / AJAX相关 阅读数: 1802
收藏 0 赞 0 分享
复制代码 代码如下:

<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无刷新实现返回天气预报数据

天气数据是通过采集中国气象网站的。本来中国天气网站也给出了数据的API接口,接下来为大家介绍下用php来写一个天气预报的模块,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

jQuery的ajax传参巧用JSON使用示例(附Json插件)

jQuery的ajax调用很方便,传参的时候喜欢用Json的数据格式,使用示例代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

ajax jquery 异步表单验证示例代码

异步表单验证想必大家早已如雷贯耳,本文为大家详细讲述下ajax jquery实现异步表单验证,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

AJAX如何接收JSON数据示例介绍

如何使用AJAX返回JSON数据,就是dataType,当你设置json后返回的json字符串传递到客户端就是JSON对象了,示例如下,感兴趣的朋友可以参考下
收藏 0 赞 0 分享

ajax局部刷新一个div下jsp内容的方法

局部刷新某个div下的jsp可以通过setInterval或者是setTimeout来轻松实现,具体如下,有此需求的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

ajax交互Struts2的action(客户端/服务器端)

本文为大家探讨下ajax交互Struts2的action并有客户端及服务器端代码,感兴趣的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

Ajax工作原理深入理解

ajax是异步的意思,它有别于传统web开发中采用的同步的方式。异步传输是面向字符的传输,它的单位是字符;而同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的
收藏 0 赞 0 分享

Ajax方式删除表格一行数据示例代码

Ajax方式删除信息在某些情况下还是蛮实用的,下面为大家具体介绍下Ajax方式如何删除表格一行数据,感兴趣的朋友可以了解下
收藏 0 赞 0 分享

Ajax叠加(Ajax返回数据用Ajax发出)示例代码

把参数用Ajax发送到数据库进行查询然后用Ajax将数据发送到数据库签到表,于是有了下面的代码,感兴趣的朋友可以了解下,希望对大家学习ajax有所帮助
收藏 0 赞 0 分享

Ajax长连接项目案例

所谓的长连接,就是不断去发送请求,把请求阻塞在服务器端,每次超过请求时间就去重新发送请求,下面以一个实例为大家详细介绍下,感兴趣的朋友可不要错过了哈
收藏 0 赞 0 分享
查看更多