ajax读取数据库内容实现二级联动下拉选择菜单示例
程序员文章站
2022-05-28 12:21:56
复制代码 代码如下:
复制代码 代码如下:
<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>