`

AJAX级联菜单实例,js

阅读更多
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" onchange="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");

分享到:
评论

相关推荐

    Js Select下拉框级联菜单 5级列表菜单.rar

    Js Select下拉框级联菜单,一共支持5级联动,相信够用了,这种菜单不用多介绍吧,后一级的值与前一级是父、子关系,该示例还演示了动态添加菜单、减少菜单的功能,还有显示/不显示空值的功能,如演示截图所示。

    jQuery+ajax实现三级级联

    该实例为本人项目中使用的模块代码,经过专业测试人员测试,兼容所有主流浏览器,如有不解之处请联系本人

    美化版的jQuery全国城市级联菜单代码包

    摘要:脚本资源,jQuery,级联菜单,全国城市菜单 美化版的jQuery全国城市级联菜单代码实例包,Select下拉框已经过美化,比传统的灰色风格Select下拉列表更美观,城市菜单信息存放在XML文件内,若城市信息有所变动,...

    Ajax 四级导航菜单ASP+Access动态版

    Asp+Ajax无限级联动下拉框菜单Access版 ASP仿Google输入框提示_自动完成功能 AJAX+ASP多级无限制级联菜单(地市版) ASP下结合AJAX实现输入框提示(自动完成) ASP 树形菜单TreeView 多样式版 jQuery实例_飞飞ajax带...

    js实现全国省份城市级联下拉菜单效果代码

    这是一个大家都知道的网页小功能,很常见,全国省份与城市级联菜单,采用Select下拉的方式选择数据,不过现在很多都Ajax了,貌似这种老形式已经过时了,不过在兼容性方面,仍然是不落后的。 运行效果截图如下: ...

    Js 3级联动的JS省市县菜单代码.rar

    Js 3级联动的JS省市县菜单代码,购物网站专用纯JS省市县三级联动,select三级联动菜单,由网络上的级联菜单做了改进:  1. 【少数民族】【自治市县】等作了处理:避免快递单打印过长内容溢出。除内特殊的5个县除外...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    MenuSample 级联菜单实例 PageSample 实现Ajax翻页效果 数据库备份 本章实例所需要的数据库 第15章(/C15/) AjaxCallerSchedul 使用AjaxCaller实现简单的定时任务 RicoColor 使用...

    Ajax完全自学手册(源代码).rar

    LinkageList 级联菜单(使用VS 2003) 第18章(\C09) Test4Google Ajax进度条 第19章(\C10) ChatSystem Ajax 聊天室 第20章(\C11) WebQQ WebQQ示例 第21章(\C11) Thirf 电视节目预告 Thirf ...

    PHP+ajax实现二级联动菜单功能示例

    本文实例讲述了PHP+ajax实现二级联动菜单功能。分享给大家供大家参考,具体如下: 如何实现二级联动 工作原理 二级联动在开发中是比较常见的一个技术点,它主要运用了JS的局部刷新技术ajax,不同于一般页面全局刷新,...

    Ajax完全自学手册PPT和源代码(ptt格式)

    LinkageList 级联菜单(使用VS 2003) 第18章(\C09) Test4Google Ajax进度条 第19章(\C10) ChatSystem Ajax 聊天室 第20章(\C11) WebQQ WebQQ示例 第21章(\C11) Thirf 电视节目预告 Thirf 翻译模块 第...

    WebService结合ajax无刷新省市三级联动下拉框

    内容索引:.NET源码,Ajax相关,Ajax,级联菜单 使用ajax技术结合c#的WebService实现的无刷新盛市、县三级联动下拉框源程序,含控件源代码,工程运行VS2003,具体一点就是使用webservice.htc,然后由JavaScript调用...

    EXT教程EXT用大量的实例演示Ext实例

    4.4.7. 露一小手,组合上面所知,省市县三级级联。哈哈~ 4.4.7.1. 先做一个模拟的,所有数据都在本地 4.4.7.2. 再做一个有后台的,需要放在服务器上咯 4.5. 把form里的那些控件全部拿出来看看 4.6. form提交数据...

    ajax实现三级联动的基本方法

    本文实例为大家分享了ajax实现三级联动的具体代码,供大家参考,具体内容如下 1.首先在一个页面上布置一个div 方便日后引用方法 &lt;body&gt; &lt;div id=sanji&gt;//div的id为“sanji” 2.sanji js处理页面 $(document...

    精通JavaScript

    • 1.3.js 1.3.htm使用的外部JavaScript文件 第2章(\第2章) • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值的用法 • 2.4.htm 转义字符的使用 ...

    python入门到高级全栈工程师培训 第3期 附课件代码

    python入门到高级全栈工程师培训视频学习资料;本资料仅用于学习,请查看后24小时之内删除。 【课程内容】 第1章 01 计算机发展史 ...15 再插两道JavaScript面试题 16 Model操作之select_related以及...

    asp.net知识库

    完整的在.net后台执行javascript脚本集合 ASP.NET 中的正则表达式 常用的匹配正则表达式和实例 经典正则表达式 delegate vs. event 我是谁?[C#] 表达式计算引擎 正式发布表达式计算引擎WfcExp V0.9(附源码) 运算...

    Java学习笔记-个人整理的

    {12.5}操作符与实例}{154}{section.12.5} {12.5.1}where}{154}{subsection.12.5.1} {12.6}函数}{156}{section.12.6} {12.7}组函数}{158}{section.12.7} {12.7.1}group by}{159}{subsection.12.7.1} {12.7.2}...

Global site tag (gtag.js) - Google Analytics