AJAX级联菜单实例,js

最新推荐文章于 2022-09-08 09:39:42 发布

king114900

最新推荐文章于 2022-09-08 09:39:42 发布

阅读量104

点赞数

分类专栏： AJAX级联菜单实例 js 文章标签： java ajax sql

本文链接：https://blog.csdn.net/king114900/article/details/83983936

版权

js 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

AJAX级联菜单实例

0 篇文章 0 订阅

订阅专栏

AJAX级联菜单实例

说明 ajax级联菜单，例如，一级菜单选择中国，二级菜单列出中国城市；一级菜单选择美国，二级菜单列出美国城市。

数据库脚本 count.sql

DROP TABLE IF EXISTS `country`;

CREATE TABLE `country` (

`id` int(11) NOT NULL auto_increment,

`name` varchar(50) default NULL,

`city` varchar(50) default NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8;

insert into country values(1,'中国','沈阳') ;

insert into country values(2,'中国','北京') ;

insert into country values(3,'美国','洛杉矶') ;

insert into country values(4,'美国','纽约') ;

DAO

package edu.syict.www.dao;

import java.util.List;

import org.hibernate.HibernateException;

import org.hibernate.Query;

import org.hibernate.Session;

import org.hibernate.Transaction;

import edu.syict.www.HibernateSessionFactory;

public class DBOperator {

@SuppressWarnings("unchecked")

public List queryByName(String name){

Session session = HibernateSessionFactory.getSession();

List list=null ;

String hql="SELECT co.city FROM Country AS co WHERE co.name=?" ;

System.out.println(hql+name);

Transaction tx = null;

try {

tx = session.beginTransaction();

Query query=session.createQuery(hql) ;

query.setString(0, name) ;

list=query.list() ;

System.out.println("数据库中记录个数:"+list.size()) ;

tx.commit() ;

} catch (HibernateException e) {

if (tx != null)

tx.rollback();

throw e;

}finally{

session.close();

}

return list ;

}

}

Bean类（Hibernate反向工程）Country.java

package edu.syict.www.POJO;

@SuppressWarnings("serial")

public class Country implements java.io.Serializable {

private Integer id;

private String name;

private String city;

public Country() {

}

public Country(String name, String city) {

this.name = name;

this.city = city;

}

public Integer getId() {

return this.id;

}

public void setId(Integer id) {

this.id = id;

}

public String getName() {

return this.name;

}

public void setName(String name) {

this.name = name;

}

public String getCity() {

return this.city;

}

public void setCity(String city) {

this.city = city;

}

}

Country.hbm.xml

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

<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"

"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">

<hibernate-mapping>

<class name="edu.syict.www.POJO.Country" table="country" catalog="test">

<id name="id" type="java.lang.Integer">

<column name="id" />

<generator class="identity" />

</id>

<property name="name" type="java.lang.String">

<column name="name" length="50" />

</property>

<property name="city" type="java.lang.String">

<column name="city" length="50" />

</property>

</class>

</hibernate-mapping>

JSP页面

<%@ page language="java" pageEncoding="UTF-8"%>

<%@ page import="java.util.*" %>

<%@ page import="edu.syict.www.dao.*" %>

<%@ page import="edu.syict.www.POJO.*" %>

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

<html>

<head>

<title>My JSP 'menu.jsp' starting page</title>

</head>

<body>

<%

Country c=null ;

DBOperator dbo=new DBOperator() ;

List listname=dbo.query("SELECT DISTINCT co.name FROM Country AS co") ;

List listcity=dbo.query("SELECT DISTINCT co.city FROM Country AS co") ;

%>

<center>

<script type="text/javascript">

var XMLHttpReq;

var currentSort;

//创建XMLHttpRequest对象

function createXMLHttpRequest() {

if(window.XMLHttpRequest) { //Mozilla 浏览器

XMLHttpReq = new XMLHttpRequest();

}

else if (window.ActiveXObject) { // IE浏览器

try {

XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {}

}

}

}

//发送请求函数

function sendRequest(url) {

createXMLHttpRequest();

XMLHttpReq.open("GET", url, true);

XMLHttpReq.onreadystatechange = processResponse;//指定响应函数

XMLHttpReq.send(null); // 发送请求

}

// 处理返回信息函数

function processResponse() {

if (XMLHttpReq.readyState == 4) { // 判断对象状态

if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息XMLHttpReq.status == 200

updateMenu();

} else { //页面不正常

alert("您所请求的页面有异常。");

}

}

}

//更新菜单函数

function updateMenu() {

var res=XMLHttpReq.responseXML.getElementsByTagName("res") ;

//alert("res===="+res[0].firstChild.nodeValue);

/**下面是用innerHTML输出控件内容的一般用法**/

//var subMenu = "";

//for(var i = 0; i < res.length; i++) {

// subMenu = subMenu + " " + res[i].firstChild.data + "";

//}

//currentSort.innerHTML = subMenu;

var list = document.all.list;

list.options.length=0;

list.add(new Option("---请选择---",""));

for(var i=0;i<res.length;i++){

list.add(new Option(res[i].firstChild.nodeValue,res[i].firstChild.nodeValue));

}

}

// 创建级联菜单函数

function showSubMenu(obj) {

//currentSort =document.getElementById(obj);

//currentSort.parentNode.style.display = "";

sendRequest("menujsp.jsp?sort=" + obj);

/**下面这一句的作用是：每次选择后回到第一个选项**/

//document.all.mli.options[0].selected=true;

}

</script>

<select name="mli" οnchange="showSubMenu(this.options[this.options.selectedIndex].value)" style="width:150px;">

<option value="">---bbb---</option>

<%

for(int i=0;i<listname.size();i++){

//c=(Country)listname.get(i) ;

out.println("<option value='"+listname.get(i)+"'>"+listname.get(i)+"</option>") ;

}

%>

</select>

<select name="list" style="width:100px;">

<option value="">---aaa---</option>

<%

for(int i=0;i<listcity.size();i++){

out.println("<option value='"+listcity.get(i)+"'>"+listcity.get(i)+"</options>") ;

}

%>

</select>

<br>

</center>

</body>

</html>

JSP页面后台

<%@ page language="java" pageEncoding="UTF-8"%>

<%@ page import="java.util.*" %>

<%@ page import="edu.syict.www.dao.*" %>

<%@ page import="edu.syict.www.POJO.*" %>

<%

response.setContentType("text/xml; charset=UTF-8");

response.setHeader("Cache-Control","no-cache");

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

sort=new String(sort.getBytes("ISO8859-1"),"GB2312") ;

System.out.println("转换编码后sort:"+sort) ;

DBOperator dbo=new DBOperator() ;

List cityes=new ArrayList() ;

try{

cityes=dbo.queryByName(sort) ;

}catch(Exception e){

e.printStackTrace() ;

}

out.println("<response>");

for(int i=0;i<cityes.size();i++){

out.println("<res>"+cityes.get(i).toString()+"</res>") ;

System.out.println(cityes.get(i)) ;

}

out.println("</response>");

%>

js传参数乱码

前端l两次encode

var unitNm = encodeURI(encodeURI(unitNm));

action中decode

unitNm = URLDecoder.decode(unitNm,"UTF-8");