Ajax 技术学习（JavaEE）—— 实现二级下拉联动

Java高频面试专题合集解析：

当然在这还有更多整理总结的Java进阶学习笔记和面试题未展示，其中囊括了Dubbo、Redis、Netty、zookeeper、Spring cloud、分布式、高并发等架构资料和完整的Java架构学习进阶导图！

更多Java架构进阶资料展示

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

• 二、让我们来实现它

• • • 2.1 前端界面 jsp

• 2.2 ajax 代码

• 2.2 使用 xml 传输数据 （servlet 代码）

• 三、运行截图

一、Ajax 实现下拉菜单

============================================================================

1.1 场景再现

我们在购买快递选择收获地址的时候，选择地域一般都是现选择省，省选择完毕后，电脑会自动显示该省对应的城市，我们选择了城市之后，系统会显示该城市所对应的的区域。

其实这就是通过 ajax 后台数据自动生成的，接下来我们就来实现一下

我们这里使用 servlet 写死数据

1.2 技术分析

1.2.1 前台分析

我们设置一个监听事件给第一个下拉选择框，当用户选择了一个省份之后，就使用 ajax 进行交互，得到对应的城市的信息。整理一下

• 监听下拉框的变化事件

• 下拉框的值发生变化之后，就与服务端进行交互

• 服务端收到数据，根据用户传过来的省份进行信息匹配，然后把数据返回给用户

• 数据返回给前端之后，使用 dom 把数据写进城市下拉列表当中

1.2.2 后台分析

后端使用 servlet 把数据写死

• 后端监听前端发过来的数据

• 判断数据类型，然后经过处理，数据重新封装，返还给前端

二、让我们来实现它

========================================================================

2.1 前端界面 jsp

<%@ page language=“java” contentType=“text/html; charset=UTF-8”

pageEncoding=“UTF-8”%>

省份的选择界面

请选择省份 湖北省 湖南省 请选择城市

2.2 ajax 代码

document.getElementById(“provinceId”).onchange = function() {

var index = this.selectedIndex; // 获取选项中下标的索引值

var province = this.options[index].innerHTML;// 获取下拉框的值

// 下拉框的值合格性验证

if (index != this.options[0]) {

// 选择城市列表的时候，会自动添加，因此调用时就清除

var citySelect = document.getElementById(“cityId”);

// 每次长度都变为 1

citySelect.options.length = 1;

// 定义请求的地址,我依然使用 post 请求

var url = “AjaxServlet_xml?time” + new Date().getTime();

// ajax 代码

var xmlhttp;

// 根据不停的版本的游览器，使用不同的 ajax 的 api

if (window.XMLHttpRequest) {

xmlhttp = new XMLHttpRequest();

} else if (window.ActiveXObject) {

// IE6 以下版本

xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);

}

// 绑定事件

xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState == 4) {

if(xmlhttp.status == 200) {

// var text = xmlhttp.responseText;

var text = xmlhttp.responseXML;

console.log(text);

// 将返回的 xml 数据进行解析操作,写入城市下拉框中

var cities = text.getElementsByTagName(“city”);

console.log(cities.length);

//得到每一个cities节点的值，动态生成下拉框，添加到下拉框中

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

var value = cities[i].firstChild.nodeValue;

//动态生成下拉框

var optionElement = document.createElement(“option”);

optionElement.innerHTML = value;

//添加到下拉框中

citySelect.appendChild(optionElement);

}

}

}

}

// 创建 http 请求，建立与服务器的连接

xmlhttp.open(“post”, url, true); // 这里的 url 由我们从外面传进来，是 AjaxCheck (一个Servlet)

// 我们采用的 post 请求，因此需要加上请求头

xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

xmlhttp.send(“province=”+province);

}

复习的面试资料

这些面试全部出自大厂面试真题和面试合集当中，小编已经为大家整理完毕（PDF版）

• 第一部分：Java基础-中级-高级

• 第二部分：开源框架（SSM：Spring+SpringMVC+MyBatis）

• 第三部分：性能调优（JVM+MySQL+Tomcat）

• 第四部分：分布式（限流：ZK+Nginx；缓存：Redis+MongoDB+Memcached；通讯：MQ+kafka）

• 第五部分：微服务（SpringBoot+SpringCloud+Dubbo）

• 第六部分：其他：并发编程+设计模式+数据结构与算法+网络

进阶学习笔记pdf

• Java架构进阶之架构筑基篇（Java基础+并发编程+JVM+MySQL+Tomcat+网络+数据结构与算法）

• Java架构进阶之开源框架篇（设计模式+Spring+SpringMVC+MyBatis）

• Java架构进阶之分布式架构篇 （限流（ZK/Nginx）+缓存（Redis/MongoDB/Memcached）+通讯（MQ/kafka））

• Java架构进阶之微服务架构篇（RPC+SpringBoot+SpringCloud+Dubbo+K8s）

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

g-Q9CUtxG8-1715806001552)]

• Java架构进阶之微服务架构篇（RPC+SpringBoot+SpringCloud+Dubbo+K8s）

[外链图片转存中…(img-5ELp7jEF-1715806001552)]

[外链图片转存中…(img-VMDC2Y7G-1715806001552)]

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取