以前在学校做过二级联动态菜单 用的Ajax，但是那个数据库用的是mysql；
数据库oracle，用了四张表：国家这张表在访问JSP时自动从数据库里面加载：
建表的过程就省略了；
jsp页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/ajax.js" charset="gb2312"></script>
</head>
<body onload="country()">
<center>
<h1>AJAX实现联动菜单</h1>
<hr/>
<table align="center">
<tr>
<td id="1">
<select id="country" onchange="getPronvice()" style="text-align: center;">
<option>---请选择---</option>
</select>
</td>
<td id="2"></td>
<td id="3"></td>
<td id="4"></td>
</tr>
</table>
</center>
</body>
</html>
JS页面：
var xmlHttp;
var zcq=0;
//自动加载国家
function country() {
var text = "sql=SELECT co_name FROM COUNTRY order by nvl(length(trim(co_name)),0) asc,co_name";
var url = "ajax/ajax!selectName.action";
createXmlhttp();
if (xmlHttp) {
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Cache-Control", "no-cache");
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
parseMessage('country');
}
}
xmlHttp.send(text);
}
}
//实现一级联动省份
function getPronvice() {
var country = document.getElementById("country").value;
var url = "ajax/ajax!selectName.action";
var text = "sql=SELECT pr_name FROM pronvice pr,country co WHERE co.co_id=pr.co_id and co.co_name='"
+ country + "' order by nvl(length(trim(pr_name)),0) asc,pr_name";
createXmlhttp();
if (xmlHttp) {
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Cache-Control", "no-cache");
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
if(zcq==0){
createSelect('pronvice', '2', 'getCity()');
zcq=1;
}
parseMessage('pronvice');
}
}
xmlHttp.send(text);
}
}
//实现二级联动城市
function getCity() {
var pronvice = document.getElementById("pronvice").value;
var url = "ajax/ajax!selectName.action";
var text = "sql=SELECT ci_name FROM city ci,pronvice pr WHERE ci.pr_id = pr.pr_id and pr.pr_name='"
+ pronvice + "' order by nvl(length(trim(ci_name)),0) asc,ci_name";
createXmlhttp();
if (xmlHttp) {
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Cache-Control", "no-cache");
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
if(zcq==1){
createSelect('city', '3', 'getArea()');
zcq=2;
}
parseMessage('city');
}
}
xmlHttp.send(text);
}
}
//实现三级联动区县
function getArea() {
var city = document.getElementById("city").value;
var url = "ajax/ajax!selectName.action";
var text = "sql=SELECT ar_name FROM city ci,area ar WHERE ci.ci_id=ar.ci_id and ci.ci_name='"
+ city + "' order by nvl(length(trim(ar_name)),0) asc,ar_name";
createXmlhttp();
if (xmlHttp) {
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Cache-Control", "no-cache");
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
if(zcq==2){
createSelect('area', '4', '');
zcq=3;
}
parseMessage('area');
}
}
xmlHttp.send(text);
}
}
//创建xmlHttp对象
function createXmlhttp() {
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//自动创建创建下拉菜单方法
function createSelect(iid, id, methodName) {
var select = document.createElement("select");
select.style.cssText = "text-align: center";
select.id = iid;
document.getElementById(id).appendChild(select);
var obj = document.getElementById(iid);
obj.setAttribute("onchange", methodName);
}
//动态解析生成下拉菜单
function parseMessage(id) {
var xmlDoc = xmlHttp.responseXML.documentElement;
var xSel = xmlDoc.getElementsByTagName('root');
var select_root = document.getElementById(id);
select_root.options.length = 0;
for ( var i = 0; i < xSel.length; i++) {
var xValue = xSel[i].childNodes[0].firstChild.nodeValue;
var xText = xSel[i].childNodes[0].firstChild.nodeValue;
var option = new Option(xText, xValue);
select_root.add(option);
}
}
action页面：
package com.zit.ajaxJoin.action;
import java.io.IOException;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
import com.zit.ajaxJoin.dao.AjaxJoinDao;
import com.zit.ajaxJoin.dao.impl.AjaxJoinDaoImpl;
public class AjaxAction extends ActionSupport{
private static final long serialVersionUID = 1L;
private String sql;
public String getSql() {
return sql;
}
public void setSql(String sql) {
this.sql = sql;
}
public String selectName() throws IOException{
HttpServletResponse response= ServletActionContext.getResponse();
response.setContentType("html/xml;charset=gb2312");
response.setCharacterEncoding("UTF-8");
AjaxJoinDao ajax=new AjaxJoinDaoImpl();
List<String>list=ajax.selectName(sql);
String strat_xml="<roots>";
String end_xml="</roots>";
String xml="<root><name>---请选择---</name></root>";
for(String string:list){
xml+="<root><name>"+string+"</name></root>";
}
response.getWriter().write(strat_xml+xml+end_xml);
return null;
}
}
实现类查询数据库的方法：
package com.zit.ajaxJoin.dao.impl;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import com.zit.ajaxJoin.dao.AjaxJoinDao;
import com.zit.ajaxJoin.db.Db;
public class AjaxJoinDaoImpl implements AjaxJoinDao {
private Connection conn;
private PreparedStatement ps;
private Statement stmt;
private ResultSet rs;
private Db db=null;
public List<String> selectName(String sql) {
if(null==db){
db=new Db();
}
//System.out.println(sql);
List<String>list=new ArrayList<String>();
try {
conn=db.getConnection();
conn.setAutoCommit(false);
stmt=conn.createStatement();
rs=stmt.executeQuery(sql);
conn.commit();
while(rs.next()){
list.add(rs.getString(1));
}
} catch (Exception e) {
e.printStackTrace();
}finally{
db.close(conn, ps, stmt, rs);
}
return list;
}
}
struts.xml配置信息：
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.enable.DynamicMethodInvocation" value="true" />
<constant name="struts.devMode" value="true" />
<package name="ajax" namespace="/ajax" extends="struts-default">
<action name="ajax" class="com.zit.ajaxJoin.action.AjaxAction">
<result name="success">
/success.jsp
</result>
</action>
</package>
</struts>
|
|
收藏
淘帖
踩
