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

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

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

更多Java架构进阶资料展示

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

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

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

其实这就是通过 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);

}

}

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

我采用 post 的方式传送数据

request.setCharacterEncoding(“utf-8”);

response.setCharacterEncoding(“utf-8”);

最近我根据上述的技术体系图搜集了几十套腾讯、头条、阿里、美团等公司21年的面试题，把技术点整理成了视频（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分

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

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

讯、头条、阿里、美团等公司21年的面试题，把技术点整理成了视频（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分

[外链图片转存中…(img-Vnc9ShSD-1715805960754)]

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

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