Ajax实现动态的二级级联菜单

今天花了点时间用Ajax实现了一个二级级联菜单。整理总结一下。为了把重点放在Ajax和级联菜单的实现上，本文省略了数据库建表语句和操作数据库的代码！

数据库建表语句就不帖出来了。主要有两张表，区域表：district。街道表：street。区域表和街道表是一对多关系，一个区域可以有零到多个街道，一条街道属于一个区域。数据如下：

页面代码 index.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/js.js"></script>
<title>Insert title here</title>
</head>
<body><select id="district" onchange="cascade(this.value)" ><option value="-1">请选择</option><c:forEach items="${districts }" var="district"><option value="${district.id }">${district.name }</option></c:forEach></select><select id="street" onchange="alert(this.value)"><option>请选择</option></select>
</body>
</html>

初始化主页面一级菜单列表的Servlet代码 InitServlet.java：

 1 package cascade.servlet;
 2 import java.io.IOException;
 3 import java.util.List;
 4
 5 import javax.servlet.ServletException;
 6 import javax.servlet.http.HttpServlet;
 7 import javax.servlet.http.HttpServletRequest;
 8 import javax.servlet.http.HttpServletResponse;
 9
10 import cascade.entity.District;
11 import cascade.service.DistrictService;
12
13
14 public class InitServlet extends HttpServlet{
15
16     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
17         doPost(req, resp);
18     }
19
20     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
21         req.setCharacterEncoding("UTF-8");
22         resp.setCharacterEncoding("UTF-8");
23         /*
24          * DistrictService  ds为操作数据库的对象.
25          * 调用该对象的getAllDistrict()方法，可以从数据库中取得所有的区域信息，封装为List<District>对象，并返回。
26          * 其中District是数据库District表的实体类
27          * 为了把重点放在Ajax和级联菜单的实现上，本文省略了操作数据库的代码！！！
28          */
29         DistrictService ds = new DistrictService();
30         List<District> districts = ds.getAllDistrict();
31         //List<District>对象存在request范围中，并转向到主页
32         req.setAttribute("districts", districts);
33         req.getRequestDispatcher("index.jsp").forward(req, resp);
34     }
35
36 }

web配置文件 web.xml：

在web.xml中添加如配置代码

  <servlet><servlet-name>init</servlet-name><servlet-class>cascade.servlet.InitServlet</servlet-class></servlet><servlet-mapping><servlet-name>init</servlet-name><url-pattern>/index</url-pattern></servlet-mapping>

此时，在浏览器中访问 InitServlet.java （假设项目名为AjaxCascade，访问地址就是：http://localhost:8080/AjaxCascade/index）

数据库的区域数据就已经填到第一级菜单项中了。

此时页面的源代码可以看到下拉菜单（select）里每一项（option）的value也是从数据库里取到的：

    <select id="district" onchange="cascade(this.value)" ><option value="-1">请选择</option><option value="1001">天河区</option>        <option value="1002">越秀区</option>        <option value="1003">海珠区</option>        <option value="1005">番禺区</option>        <option value="1000">白云区</option>        <option value="1004">花都区</option>        </select>

现在开始现实街道下拉菜单（也就是页面上id为street的select）的动态获取。

我们知道，但区域菜单的值改变时，街道菜单的值也要动态的发生改变（如区域选择“天河区”，街道菜单就应该动态加上“中山大道“这一项，如区域选择“海珠区”，街道菜单就应该动态加上“昌岗路”，并删除“中山大道“）。

为了现实上面所说的功能，要为区域菜单添加 onchange 事件的处理：οnchange="cascade(this.value)" 当区域菜单值发生改变时调用cascade方法，并把自己的value属性传递进去。

cascade代码如下 js.js：

 1 //XMLHttpRequest组件
 2 var xhs;
 3 //区域菜单的值发生改变时调用该方法,并把区域菜单当前的value传递进来
 4 function cascade(id){
 5     //当id不大于0时，说明当前选择的是“请选择”这一项，则不做操作
 6     if(id>0){
 7         //请求字符串,把区域的id作为页面参数传到后台
 8         var url="cascade?id="+id;
 9         //创建XMLHttpRequest组件
10         xhs=new XMLHttpRequest();
11         //设置回调函数,processReuqest方法的定义在下面
12         xhs.onreadystatechange=processReuqest;
13         //打开与服务器的地址连接
14         xhs.open("post", url, true);
15         //发送请求
16         xhs.send(null);
17     }
18 }
19
20 //processReuqest方法作为回调方法
21 function processReuqest(){
22     if(xhs.readyState==4){
23         if(xhs.status==200){
24             //创建新的select节点
25             var newSelect=document.createElement("select");
26             newSelect.id="street";
27             //为新创建的select节点添加onchange事件，以便测试用
28             newSelect.οnchange=function test(){
29                 alert(this.value);
30             };
31             //为新创建的select节点添加option节点
32             var op=document.createElement("option");
33             op.value=-1;
34             op.innerHTML="请选择";
35             newSelect.appendChild(op);
36             //得到完成请求后返回的字串符
37             var str = xhs.responseText;
38             //根据返回的字符串为新创建的select节点添加option节点
39             var arr1=str.split(",");
40             for(var i=0;i<arr1.length;i++){
41                 var arr2=arr1[i].split("=");
42                 var child=document.createElement("option");
43                 child.innerHTML=arr2[1];
44                 child.value=arr2[0];
45                 newSelect.appendChild(child);
46             }
47             //用新select节点替换旧的select节点
48             var select = document.getElementById("street");
49             document.body.replaceChild(newSelect, select);
50         }
51     }
52 }

XMLHttpRequest 对象：XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。

创建XMLHttpRequest 对象：尽管大部份浏览器都支持 new XMLHttpRequest() 来得到 XMLHttpRequest 对象，但IE浏览器和其他Web浏览器返回的 XMLHttpRequest 对象实例是不相同的，为了支持更多浏览器，建议编码时如下所示的代码创建XMLHttpRequest 实例。

function createXmlHttpRequest(){if(window.ActiveXObject){return new ActiveXObject("Microsoft.XMLHTTP");}else if(window.XMLHttpRequest){return new XMLHttpRequest();}
}

open(method,url,async)方法：建立于服务器的连接，method参数指定请求的HTTP方法。URL 参数指定请求的地址。acync 参数指定是否使用异步请求，其值为 true 或 false。

send(content)方法：发送请求，content参数指定请求的参数。当send方法不配置参数，即xhr.send()时，在IE中能够正常运行，但在Firefox中却不能，所以，建议最好加上null 。

onreadystatechange属性：指定XMLHttpRequest对象的回调函数。onreadystatechange属性作用与文本框的onblur等属性一样，是事件处理属性，即当 XMLHttpRequest 的状态发生改变时，XMLHttpRequest 对象都会解发onreadystatechange所指定的函数。

readyState属性：XMLHttpRequest的状态信息。XMLHttpRequest对象有如下几种状态。

0：XMLHttpRequest对象没有完成初始化，此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。

1：XMLHttpRequest对象开始发送请求，此时，代码已经调用open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。

2：XMLHttpRequest对象的请求发送完成。此时，已经通过send()方法把一个请求发到服务器端，但是还没有收到一个响应。

3：XMLHttpRequest对象开始读取响应。此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。

4：XMLHttpRequest对象读取响应结束。些时，响应已被完全接收。

status属性：HTTP的状态码，仅当readyState的值为3或4时，status属性才可用。status属性如下。

200：服务器响应正常。

400：无法找到请求的资源。

403：没有访问权限。

404：访问资源不存在。

500：服务器内部错误。

responseText属性：获得响应的文本。当readyState值为0、1、2时，reponseText包含一下空字符串。当readyState值为3时，响应中包含还未完成的响应信息。当readyState值为4时，readyState包含完整的响应信息。

接下来是后台代码的实现，从cascade方法可以看到，XMLHttpRequest对象是请求到名为cascade的地址上的。

CascadeServlet.java：

 1 package cascade.servlet;
 2 import java.io.IOException;
 3 import java.io.PrintWriter;
 4 import java.util.List;
 5
 6 import javax.servlet.ServletException;
 7 import javax.servlet.http.HttpServlet;
 8 import javax.servlet.http.HttpServletRequest;
 9 import javax.servlet.http.HttpServletResponse;
10
11 import cascade.entity.District;
12 import cascade.entity.Street;
13 import cascade.service.StreetService;
14
15
16 public class CascadeServlet extends HttpServlet{
17
18     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
19         doPost(req, resp);
20     }
21
22     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
23         req.setCharacterEncoding("UTF-8");
24         resp.setCharacterEncoding("UTF-8");
25         int id =Integer.parseInt(req.getParameter("id"));
26         District district=new District();
27         district.setId(id);
28
29         /*
30          * StreetService  ss为操作数据库的对象.
31          * 调用该对象的getAllStreet()方法，可以从数据库中取得所有的区域信息，封装为List<Street>对象，并返回。
32          * 其中Street是数据库Street表的实体类
33          * 为了把重点放在Ajax和级联菜单的实现上，本文省略了操作数据库的代码！！！
34          */
35         StreetService ss=new StreetService();
36         List<Street> streets=ss.getAllStreet(district);
37         //把得到的街道对象集合拼接成字符串文本
38         StringBuffer sb=new StringBuffer();
39         for(int i=0;i<streets.size();i++){
40             sb.append(streets.get(i).getId()).append("=").append(streets.get(i).getName());
41             if(i!=streets.size()-1){
42                 sb.append(",");
43             }
44         }
45         //servlet不转向或重定向到任何页面，使用resp.getWriter().print()方法可以把文本响应给XMLHttpRequest对象
46          PrintWriter out = resp.getWriter();
47          out.print(sb.toString());
48          out.flush();
49          out.close();
50     }
51
52 }

在web.xml中的配置:

  <servlet><servlet-name>cascade</servlet-name><servlet-class>cascade.servlet.CascadeServlet</servlet-class></servlet><servlet-mapping><servlet-name>cascade</servlet-name><url-pattern>/cascade</url-pattern></servlet-mapping>

完工，效果如下：

转载于:https://www.cnblogs.com/likailan/p/3328761.html

Ajax实现动态的二级级联菜单相关推荐

二级级联菜单---纯js实现
2019独角兽企业重金招聘Python工程师标准>>> 直接拷贝过去成html文件就可以看到效果了. 1.html文件 <!DOCTYPE html PUBLIC " ...
jqurey ajax 的动态添加二级联动下拉菜单
aspx <div id="Attribute"> 添加类型:<span class="oper"> <a href=" ...
ajax里绑定框,Select级联菜单，用Ajax获取Json绑定下拉框（jQuery）
需求类似这样 ↓ ↓ ↓ --> 菜单A发生变化,动态取数据填充下拉菜单B. JS代码如下: $(function () { $("#TeamSelect").chan ...
二级联动菜单ajax刷新,jquery json ajax 二级联动菜单实例
本文实例讲述了jquery json ajax 二级联动菜单.分享给码农们参考,具体如下: 后台Handler.ashx using System; using System.Web; using S ...
asp+ajax菜单,AJAX_基于asp+ajax和数据库驱动的二级联动菜单，index.asp 页面代码复制代码代 - phpStudy...
基于asp+ajax和数据库驱动的二级联动菜单 index.asp 页面代码复制代码代码如下: set cmd = conn.execute("select bigclassid,big ...
带有数据库的动态级联菜单
这是一个带有数据库的动态级联菜单,搞了好久都没搞出来,在经典有人帮我贴出来了,我稍微修改了一下收藏在这里,希望和大家一起分享! <%@LANGUAGE="VBSCRIPT" ...
Jsp+javascript打造二级级联下拉菜单
数据库需求分析: class(一级栏目信息):classId(自动编号),className(栏目名称) Nclass(二级栏目信息):NclassId(自动编号),NclassName(栏目名称), ...
php js 二级联动_PHP+ajax实现二级联动菜单功能示例
本文实例讲述了PHP+ajax实现二级联动菜单功能.分享给大家供大家参考,具体如下: 如何实现二级联动工作原理二级联动在开发中是比较常见的一个技术点,它主要运用了JS的局部刷新技术ajax,不同于 ...
java ajax 联动菜单_二级联动菜单代码(AJAX JAVA).
二级联动菜单代码(AJAX+JAVA)珍藏 [java] pageEncoding="UTF-8"%> 二级菜单联动演示 var req; window.οnlοad=fun ...
ajax异步请求数据库实现级联下拉菜单。
ajax实现级联下拉菜单,使用Springboot实现. 思路很简单,使用ajax异步请求数据库数据即可. 文末有项目源码! 实现效果: 废话不多说,现在我们来开始实现! 第一步. 创建三张表:省.市 ...

Ajax实现动态的二级级联菜单

Ajax实现动态的二级级联菜单相关推荐

最新文章

热门文章