手机
当前位置:查字典教程网 >编程开发 >AJAX相关 >AJAX级联下拉框的简单实现案例
AJAX级联下拉框的简单实现案例
摘要:需要的JAVA类复制代码代码如下:packagecom.ajaxlab.ajax;importjava.util.ArrayList;imp...

需要的JAVA类

复制代码 代码如下:

package com.ajaxlab.ajax;

import java.util.ArrayList;

import java.util.Collection;

import java.util.Iterator;

import org.jdom.Document;

import org.jdom.Element;

import org.jdom.input.SAXBuilder;

import com.ajaxlab.ajax.ProductClass;

public class ClassService {

private Document dom;

public ClassService(){

try{

SAXBuilder builder=new SAXBuilder();

this.dom=builder.build(ClassService.class.getResource("product.xml"));

}catch(Exception e){

e.printStackTrace();

}

}

public ProductClass[] getAllClass1(){

Collection products=new ArrayList();

Iterator iterator=this.dom.getRootElement().getChildren().iterator();

do{

Element element=(Element)iterator.next();

ProductClass product=new ProductClass(element.getAttributeValue("id"),

element.getAttributeValue("className"));

products.add(product);

}while(iterator.hasNext());

return (ProductClass[])products.toArray(new ProductClass[0]);

}

public ProductClass[] getAllClass2ById(String class1Id){

Collection products=new ArrayList();

Element classElement=null;

Iterator iterator=this.dom.getRootElement().getChildren().iterator();

do{

Element element=(Element)iterator.next();

if(class1Id.equalsIgnoreCase(element.getAttributeValue("id"))){

classElement=element;

break;

}

}while(iterator.hasNext());

if(classElement!=null){

Iterator iter=classElement.getChildren().iterator();

do{

Element element=(Element)iter.next();

ProductClass product=new ProductClass(element.getAttributeValue("id"),

element.getAttributeValue("className"));

products.add(product);

}while(iter.hasNext());

return (ProductClass[])products.toArray(new ProductClass[0]);

}

else{

return null;

}

}

public ProductClass[] getAllClass3ById(String class1Id,String class2Id) {

Collection products = new ArrayList();

Element class1Element = null;

Element class2Element = null;

Iterator iterator = this.dom.getRootElement().getChildren().iterator();

do {

Element element = (Element)iterator.next();

if(class1Id.equalsIgnoreCase(element.getAttributeValue("id"))) {

class1Element = element;

break;

}

}while(iterator.hasNext());

if(class1Element!=null) {

Iterator iter = class1Element.getChildren().iterator();

do {

Element element = (Element)iter.next();

if(class2Id.equalsIgnoreCase(element.getAttributeValue("id"))) {

class2Element = element;

break;

}

}while(iter.hasNext());

if(class2Element!=null) {

Iterator iter2 = class2Element.getChildren().iterator();

do {

Element element = (Element)iter2.next();

ProductClass product = new ProductClass(element.getAttributeValue("id"),element.getAttributeValue("className"));

products.add(product);

}while(iter2.hasNext());

}

return (ProductClass[])products.toArray(new ProductClass[0]);

}

else return null;

}

}

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE class SYSTEM "product.dtd" >

<class>

<class1 className="电脑配件" id="1">

<class2 className="内存" id="1">

<class3 id="1" className="kingmax"></class3>

<class3 id="2" className="kingston"></class3>

<class3 id="3" className="samsung"></class3>

<class3 id="4" className="hydadi"></class3>

<class3 id="5" className="ibm"></class3>

</class2>

<class2 className="硬盘" id="2">

<class3 id="6" className="hithait"></class3>

<class3 id="7" className="IBM"></class3>

<class3 id="8" className="samsung"></class3>

<class3 id="9" className="westdata"></class3>

</class2>

</class1>

<class1 className="食品配件" id="2">

<class2 className="汉堡包" id="1">

<class3 id="1" className="麦当劳"></class3>

<class3 id="2" className="肯得基"></class3>

<class3 id="3" className="罗杰丝"></class3>

</class2>

<class2 className="饮料" id="2">

<class3 id="4" className="cocacola"></class3>

<class3 id="5" className="sprite"></class3>

<class3 id="6" className="coffee"></class3>

<class3 id="7" className="water"></class3>

</class2>

</class1>

</class>

<?xml version="1.0" encoding="GB2312" ?>

<!ELEMENT class (class1+)>

<!ELEMENT class1 (class2+)>

<!ATTLIST class1 className NMTOKEN #REQUIRED>

<!ATTLIST class1 id NMTOKEN #REQUIRED>

<!ELEMENT class2 (class3+)>

<!ATTLIST class2 className NMTOKEN #REQUIRED>

<!ATTLIST class2 id NMTOKEN #REQUIRED>

<!ELEMENT class3 EMPTY>

<!ATTLIST class3 className NMTOKEN #REQUIRED>

<!ATTLIST class3 id NMTOKEN #REQUIRED>

JSP:

(1)getClass.jsp 充当业务层供ajax调用

<%@ page contentType="text/html; charset=gb2312"%>

<%@ page import="com.ajaxlab.ajax.*"%>

<%

String class1Id = request.getParameter("class1Id");

String class2Id = request.getParameter("class2Id");

if("".equals(class1Id)) class1Id = null;

if("".equals(class2Id)) class2Id = null;

ClassService service = new ClassService();

if((class1Id!=null)&&(class2Id==null)) {

ProductClass[] classes = service.getAllClass2ById(class1Id);

if(classes!=null) {

for(int i=0;i<classes.length;i++) {

out.print(classes[i].getId()+","+classes[i].getClassName()+"|");

}

}

}

else if((class1Id!=null)&&(class1Id!=null)) {

ProductClass[] classes = service.getAllClass3ById(class1Id,class2Id);

if(classes!=null) {

for(int i=0;i<classes.length;i++) {

out.print(classes[i].getId()+","+classes[i].getClassName()+"|");

}

}

}

%>

(2)divmenu.jsp

<%@ page contentType="text/html; charset=gb2312"%>

<%@ page import="com.ajaxlab.ajax.*"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<script type="text/javascript" src="ajax_func.js" ></script>

<script type="text/javascript">

function doChange() {

var f = document.forms[0];

send_request("GET","getClass.jsp?class1Id="+f.select11.value+"&class2Id=",null,"TEXT",populateClass2);

}

function doChange2() {

var f = document.forms[0];

send_request("GET","getClass.jsp?class1Id="+f.select11.value+"&class2Id="+f.select12.value,null,"TEXT",populateClass3);

}

function populateClass2(){

var f=document.forms[0];

if(http_request.readystate==4){

if(http_request.status==200){

var list=http_request.responseText;

var classList=list.split("|");

f.select12.options.length=1;

for(var i=0;i<classList.length-1;i++){

var temp=Trim(classList[i]).split(",");

f.select12.add(new Option(temp[1],temp[0]));

}

}

}

}

function populateClass3(){

var f=document.forms[0];

if(http_request.readystate==4){

if(http_request.status==200){

var list=http_request.responseText;

var classList=list.split("|");

f.select13.options.length=1;

for(var i=0;i<classList.length-1;i++){

var temp=Trim(classList[i]).split(",");

f.select13.add(new Option(temp[1],temp[0]));

}

}

}

}

function LTrim(str)

{

var whitespace = new String(" /t/n/r");

var s = new String(str);

if (whitespace.indexOf(s.charAt(0)) != -1)

{

var j=0, i = s.length;

while (j < i && whitespace.indexOf(s.charAt(j)) != -1)

{

j++;

}

s = s.substring(j, i);

}

return s;

}

function RTrim(str)

{

var whitespace = new String(" /t/n/r");

var s = new String(str);

if (whitespace.indexOf(s.charAt(s.length-1)) != -1)

{

var i = s.length - 1;

while (i >= 0 && whitespace.indexOf(s.charAt(i)) != -1)

{

i--;

}

s = s.substring(0, i+1);

}

return s;

}

function Trim(str)

{

return RTrim(LTrim(str));

}

</script>

<%

ClassService service = new ClassService();

ProductClass[] classes = service.getAllClass1();

%>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Insert title here</title>

</head>

<body><center>

<form name="classForm" method="post" action="">

<select name="select11" id="select11" onchange="doChange(this.value)">

<option value="">请选择分类一</option>

<%

for(int i=0;i<classes.length;i++) {

out.println("<option value='"+classes[i].getId()+"'>"+classes[i].getClassName()+"</option>");

}

%>

</select>

<select name="select12" id="select12" onchange="doChange2(this.value)">

<option value="">请选择分类二</option>

</select>

<select name="select13" id="select13">

<option value="">请选择分类三</option>

</select>

</form>

</center></body>

</html>

【AJAX级联下拉框的简单实现案例】相关文章:

AJAX 用户注册时的应用实例

Ajax+PHP简单基础入门实例教程

ajax无刷新分页的简单实现

Ajax实现无刷新三联动下拉框

ajax 登录功能简单实现(未连接数据库)

Ajax读取数据到表格的实现代码

Ajax在请求过程中显示进度的简单实现

ajax完美解决的下拉框的onchange问题

Ajax+PHP简单数据交互

AJAX的原理—如何做到异步和局部刷新【实现代码】

精品推荐
分类导航