java AJAX实现级联下拉框

代码如下:

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(" ");
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(" ");
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>

(0)

相关推荐

  • jQuery+AJAX实现无刷新下拉加载更多

    随着互联网时代的发展,web前端已经和后台数据挂钩,作为web前端仅仅不是只切图写写html,css  和简单js交互. js  code $(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; var timer2 = null; $.ajax({ url: '/lightapp/marketing/verify/apply/list?page=1', t

  • Ajax实现列表无限加载和二级下拉选项效果

    Ajax做列表无限加载和Ajax做二级下拉选项,供大家参考,具体内容如下 //栏目Ajax做加载 public function ajaxlist(){ //echo "http://www.域名.com/index.php?a=Index&c=Index&m=ajaxlist"; //echo "<hr>"; $data = Q('sum'); $where = array(); $where['cid'] = 33; $rongyuL

  • Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JquerySort.aspx.cs" Inherits="demo_JquerySort" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

  • php+ajax实现无刷新动态加载数据技术

    我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术.我们发现很多网站用到这种技术,必应图片搜索.新浪微博.QQ空间等将该技术应用得淋漓尽致. 滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用.本文将使用jQuery,结合PHP,mysql以及JS

  • php+ajax+jquery实现点击加载更多内容

    我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文我将结合jQuery和PHP给大家讲述如何实现这种应用. 基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录

  • jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)

    浮动布局:即HTML结构的列,是用浮动方式. 一.功能分析: 1.判断图片是否进入可视区域: 2.用AJAX请求服务器数据: 3.将数据播入到相应的列队: 二.实现方法: 给window的scroll事件l绑定一个处理函数:做如下工作: 1.如何判断最后一行的图片,是否进入了可视区域? 如果:最后一行的某个图片距离浏览器可视区域顶部的距离值 小于 (可视区域的高度+滚动条滑动的距离值): 那么:就可以判定这个图片进入了浏览器的可视区域: 2.如何用AJAX请求服务器数据; $.getJSON()

  • jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

    对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--

  • php+ajax做仿百度搜索下拉自动提示框(有实例)

    php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图 下面是三个文件的代码 把sql文件导入到mysql数据库里 修改下数据库密码为自己的 记得哦是UTF-8编码 php+mysql+ajax实现百度搜索下拉提示框 效果图 rpc.php文件 复制代码 代码如下: <?php mysql_connect('localhost', 'root' ,''); mysql_select_db("test"); $queryString = $

  • ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单

    首先是数据库的设计.分类表叫cate. 我做的是分类数据的二级联动,数据需要的字段有:id,name(中文名),pid(父id). 父id的设置: 若数据没有上一级,则父id为0,若有上级,则父id为上一级的id. 数据库有内容后,就可以开始写代码,进行二级联动的实现. 先在后台php获取所有pid为0的数据,保存到$cate中,然后在第一层的<select>中用foreach循环输出. Html代码: 复制代码 代码如下: <select name="type" s

  • 用ajax动态加载需要的js文件

    习惯了用java,在java中,需要某个类直接import就可以了,所以做javascript的时候也想实现这个效果. 前段时间,用了下dojo,里面的dojo.require的功能很不错,一看代码,晕了,一大堆东西,唉-还是自己写个简单点的,dojo.require可以引入包,我就只做一个导入js文件的. 开始用的document.write,执行顺序不对了,这是在后面进行导入,而我们总是在前面执行中就需要导入的js,这样,执行中就会报"某某未定义",就是顺序问题了. 接着,我就想用

随机推荐