AJAX二级下拉联动案例

我们在购物的时候,常常需要我们来选择自己的收货地址,先选择省份,再选择城市

有没有发现:当我们选择完省份的时候,出现的城市全部都是根据省份来给我们选择的。这是怎么做到的呢???其实就是通过AJAX来完成的。使用AJAX技术让我们看起来网页非常“智能”,会根据省份来给出对应的城市信息。

我们这里就不读取数据库了,直接在Servlet写死数据来进行模拟测试


分析

我们知道AJAX与服务器之间的交互常用的传输载体格式有三种:

  • HTML
  • XML
  • JSON

由于省份与城市是有层级关系的,因此我们只能用XML或者JSON

我们这里首先就用XML来进行,后面会使用JSON,来看看他俩有什么不同的地方。。

前台分析

当用户选择了某个省份之后,就使用AJAX与服务器进行交互,那么在选择城市的时候就出现对应的城市信息。

  • 监听下拉框值变化事件
  • 只要下拉框值变化了,就与服务器进行交互
  • 得到服务器返回的值,解析XML
  • 使用DOM把数据写到城市下拉框列表中

后台分析

  • 得到前台带过来的数据
  • 判断该数据是什么,返回对应的的XML文件

写JSP页面


  1. <%--
  2. Created by IntelliJ IDEA.
  3. User: ozc
  4. Date: 2017/5/17
  5. Time: 19:38
  6. To change this template use File | Settings | File Templates.
  7. --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  9. <html>
  10. <head>
  11. <title>多级联动</title>
  12. <script type="text/javascript" src="js/ajax.js"></script>
  13. </head>
  14. <body>
  15. <%--############前台页面###################--%>
  16. <select name="province" id="provinceId">
  17. <option value="-1">请选择省份</option>
  18. <option>广东</option>
  19. <option>湖南</option>
  20. </select>
  21. <select name="city" id="cityId">
  22. <option>请选择城市</option>
  23. </select>
  24. <%--############AJAX###################--%>
  25. <script type="text/javascript">
  26. document.getElementById("provinceId").onchange = function () {
  27. /**********定位到下拉框,获取下拉框的值***************/
  28. // 获取选中的下拉框索引值
  29. var index = this.selectedIndex;
  30. // 得到下拉框的值
  31. var province = this.options[index].innerHTML;
  32. //下拉框的值要是“请选择”,那么我们是不会访问服务器的
  33. if ("请选择省份" != province) {
  34. /********由于每次都会自动添加,因此每次在调用的时候清除***********/
  35. var citySelect = document.getElementById("cityId");
  36. //每次都将option变成长度只有1的
  37. citySelect.options.length = 1;
  38. /*************ajax代码*********************/
  39. //创建AJAX对象
  40. var ajax = createAJAX();
  41. //准备发送请求
  42. var method = "post";
  43. var url = "${pageContext.request.contextPath}/ProvinceServlet?time=" + new Date().getTime();
  44. ajax.open(method, url);
  45. //由于是POST方式,因此要设置头
  46. ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
  47. ajax.send("province=" + province);
  48. /************ajax回调函数*********************/
  49. ajax.onreadystatechange = function () {
  50. if (ajax.readyState == 4) {
  51. if (ajax.status == 200) {
  52. //得到服务器端带过来的XML
  53. var XMLDocument = ajax.responseXML;
  54. /**********解析XML文档,使用DOM写到下拉框中****************/
  55. var cities = XMLDocument.getElementsByTagName("city");
  56. //得到每一个cities节点的值,动态生成下拉框,添加到下拉框中
  57. for (var i = 0; i < cities.length; i++) {
  58. var value = cities[i].firstChild.nodeValue;
  59. //动态生成下拉框
  60. var optionElement = document.createElement("option");
  61. optionElement.innerHTML = value;
  62. //添加到下拉框中
  63. citySelect.appendChild(optionElement);
  64. }
  65. }
  66. }
  67. };
  68. }
  69. };
  70. </script>
  71. </body>
  72. </html>

Servlet


  1. import java.io.IOException;
  2. import java.io.PrintWriter;
  3. /**
  4. * Created by ozc on 2017/5/17.
  5. */
  6. @javax.servlet.annotation.WebServlet(name = "ProvinceServlet",urlPatterns = "/ProvinceServlet")
  7. public class ProvinceServlet extends javax.servlet.http.HttpServlet {
  8. protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
  9. //设置中文编码
  10. request.setCharacterEncoding("UTF-8");
  11. String province = request.getParameter("province");
  12. //这里是返回的是XML,因此指定XML数据!
  13. response.setContentType("text/xml;charset=UTF-8");
  14. PrintWriter printWriter = response.getWriter();
  15. /****************返回XML文件给前台**************/
  16. printWriter.write("<?xml version='1.0' encoding='UTF-8'?>");
  17. printWriter.write("<root>");
  18. if("广东".equals(province)){
  19. printWriter.write("<city>广州</city>");
  20. printWriter.write("<city>深圳</city>");
  21. printWriter.write("<city>中山</city>");
  22. }else if("湖南".equals(province)){
  23. printWriter.write("<city>长沙</city>");
  24. printWriter.write("<city>株洲</city>");
  25. printWriter.write("<city>湘潭</city>");
  26. printWriter.write("<city>岳阳</city>");
  27. }
  28. printWriter.write("</root>");
  29. System.out.println("1111");
  30. /*******事后操作*******/
  31. printWriter.flush();
  32. printWriter.close();
  33. }
  34. protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
  35. this.doPost(request, response);
  36. }
  37. }

效果:

XML方式总结

  • 监听下拉框的变化,如果变化了,那么就使用异步操作去访问服务器,得到对应的数据返回给异步对象
  • 异步对象解析服务器带过来的数据,使用DOM编程把数据动态添加到页面上
    • 在Servlet上记得要指定返回的是XML的数据!
    • 在前台解析XML文档的时候,不能直接使用innerHtml来得到节点的值,只能通过firstChild.nodeValue的方式获取。
    • 由于每次append到下拉框都会连续append,因此在响应事件的时候,把下拉框清零
    • 把下拉框options的长度赋值为1,那么就是清零的操作了

AJAX二级下拉联动【XML方式】的更多相关文章

  1. Ajax案例-基于XML,以POST方式,完成省份-城市二级下拉联动

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC & ...

  2. AJAX多级下拉联动【JSON】

    前言 前面我们已经使用过了XML作为数据载体在AJAX中与服务器进行交互.当时候我们的案例是二级联动,使用Servlet进行控制 这次我们使用JSON作为数据载体在AJAX与服务器交互,使用三级联动, ...

  3. 菜鸟学Java(七)——Ajax+Servlet实现无刷新下拉联动

    下拉联动的功能可以说非常的常用,例如在选择省.市等信息的时候:或者在选择大类.小类的时候.总之,下拉联动很常用.今天就跟大家分享一个简单的二级下拉联动的功能. 大类下拉框:页面加载的时候就初始化大类的 ...

  4. ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动,还有从数据库中获得

    今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新 ...

  5. Ajax jQuery下拉框联动案例

    需求: 使用ajax和jQuery实现下拉框联动. 注意:需要加入jquery-2.1.1.min.js 前台 <!DOCTYPE html> <html> <head& ...

  6. Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  7. 用NPOI导出Excel,生成下拉列表、以及下拉联动列表(第1篇/共3篇)

    最近帅帅的小毛驴遇到一个很奇葩的需求: 导出Excel报表,而且还要带下拉框,更奇葩的是,下拉框还是联动的. 小毛驴一天比较忙,所以这等小事自然由我来为她分忧了.经历了两天,做了几种解决方案,最后完美 ...

  8. DBLookupCombobox实现下拉联动

    这次用DBLookupCombobox实现省份-城市-地区的下拉联动,用以学习DBLookupCombobox的一些用法 效果图: 首先建立数据表(数据表形式可以多种多样:数据库表.文本.xml等,最 ...

  9. Web前端开发实战1:二级下拉式菜单之CSS实现

    二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...

随机推荐

  1. position属性absolute和relative理解

    relative:相对于自身静态位置进行定位,不脱离流. absolute:绝对定位,脱离流,如果父元素定义了position属性,无论是absolute.relative还是fixed,都是相对于父 ...

  2. Spring Web MVC(一)

    [toc] 概述 Spring的web框架围绕DispatcherServlet设计. DispatcherServlet的作用是将请求分发到不同的处理器. Spring的web框架包括可配置的处理器 ...

  3. 使用Visual Studio Code和typescript 开发调试React Native项目

    关于React Native的详细介绍我就不叙述了,他是使用js构建原声app的开发框架.一次变异多平台运行,非常强大.但是个人不喜欢js的过于灵活(弱类型)的语法.强大的强类型语言Typescrip ...

  4. Andoird开发手机壁纸

    Android 开发手机壁纸3种方法 首先使用WallpaperManager wpm = (WallpaperManager) getActivity().getSystemService(Cont ...

  5. linux磁盘分区 简要

    基础知识: 以机械磁盘来说,磁盘的组成为盘片.机械手臂.磁头.主轴马达. 数据被写入在盘片上. 盘片分为 扇区Sector 柱面Cylinder 整块磁盘的第一个扇区特别重要 用来存放主引导分区Mas ...

  6. 开机后发现Win7桌面上什么都没有该如何恢复

    开机后发现Win7桌面上什么都没有该如何恢复 win7桌面上什么都没有该如何恢复:当我们打开电脑,发现win7桌面上什么都没有,那么该如何恢复呢?下面由我来介绍windows7桌面上图标不显示的解决方 ...

  7. WireX:Android智能手机组成的DDoS僵尸网络

    阿里聚安全小编曾多次报道了官方应用市场出现恶意软件的事件,让大家在下载APP的时候三思而后行. 最近多家安全公司组成的安全研究小组发现了一个新的.传播广泛的僵尸网络,它是由成千上万的Android智能 ...

  8. Java入门(2) —— 变量详解、运算符、定义类和定义方法以及方法的调用

    1.变量 1.定义变量 1.声明的同时直接赋值 数据类型 变量名 = 值; 2.先声明,后赋值 声明: 数据类型 变量名; 赋值: 变量名 = 值; 2.数据类型 基本数据类型:4类8种 整数 --- ...

  9. ubuntu下安装rubymine

    1.安装jdk 先查看系统有没有安装jdk,打开终端,输入以下命令: java -version 如果没有安装,在联网的环境下执行: $ -jdk 2.安装rubymine 从官网(http://ww ...

  10. H5页面中尝试调起APP

    安卓版本5.0以上 IOS版本10.0以上 采用事件触发的方式处理唤醒APP 市面上常见的功能 这种功能现如今应该非常普遍了,淘宝H5,知乎H5等等... 点击后会调起APP或者打开下载页面或者直接进 ...