JAVA WEB DAY 08_AJAX & JOSN_综合

文章目录

AJAX&JSON
- 目标
- 01_全局和局部刷新概述-[★★]
- 02_Ajax概述-[★★]
- 03_同步请求与异步请求的区别-[★★]
- 04_原生 ajax 案例-异步校验用户名-[★]
- - 什么是原生ajax
  - XMLHttpRequest 对象介绍
- 05_ jQuery 异步请求方法1-全局 get 方法-[★★★★★]
- 06_ jQuery 异步请求方法2-全局 post 方法-[★★★★★]
- 07_ jQuery 异步请求方法3-全局 ajax 方法-[★★★★★]
- - 服务器端实现
  - 前端页面实现
- 08_ jQuery 3.0 新增方法-全局 get 和 post 方法-[★★★★]
- 09_ JSON 概述-[★★]
- 10_ JSON 语法演示-[★★★★]
- 11_ JSON 转换工具- Jackson 的使用-[★★★★]
- - Jackson工具使用演示
- 12_ JavaScrpit 操作 JSON 的方法-[★★★★]
- 13_ Ajax 的跨域问题概述和演示-[★★]
- 14_ Ajax 实现跨域访问方式-[★★★★]
- 15_案例-省市联动-[★★★★]

AJAX&JSON

目标

01_全局和局部刷新概述-[★★]

全局剧新：每次刷新页面是刷新整个网页的内容
局部剧新：刷新页面中某个区域的内容

02_Ajax概述-[★★]

概念：

Asynchronous JavaScript And XML

异步 JavaScript 和 XML

作用：

发送异步请求到服务器获取数据实现页面局部刷新

03_同步请求与异步请求的区别-[★★]

同步和异步发送请求的区别：

同步请求：浏览器发送的请求，请求如果没有响应回来则用户只能等待，无法执行其他操作

异步请求：由 JS 发送的请求，用户不需要等待请求响应回来就可以继续执行其他操作

04_原生 ajax 案例-异步校验用户名-[★]

原生ajax引擎核心操作对象叫什么? XMLHttpRequest

实现js异步请求服务器端代码实现步骤?
2.1 创建请求对象： XMLHttpRequest
2.2 监听准备状态值的变化：回调函数
* 判断准备状态值是否为4并且状态码是否200：通过请求对象的responseText获取服务器返回数据
2.3 打开与服务器的连接：请求方式请求地址是否是异步
2.4 调用send方法发送请求

什么是原生ajax

原生ajax：指所有的 AJAX 的操作代码都使用纯 JS 去完成，不使用任何框架。开发效率相对低，代码量更大些。
核心对象： XMLHttpRequest，这是一个请求对象，用于将请求发送给服务器。接收从服务器发送回来数据。

XMLHttpRequest 对象介绍

创建 XMLHttpRequest 对象	说明
new XMLHttpRequest()	创建一个请求对象

XMLHttpRequest 对象的事件	说明
onreadystatechange	当这个请求对象的准备状态发生改变时，激活这个事件。如：后台操作的时候，发送请求给服务器，这个状态就会发生变化。如：响应回来，这个状态也会发生变化。

XMLHttpRequest对象的属性	说明
readyState	这个属性用来得到准备状态的值，如果这个值等于4表示请求结束并且服务器已经响应回来
status	状态码，服务器状态码是200，表示响应正确
responseText	取得从服务器发送回来的数据，文本格式

readyState状态值的范围0~4
0：未初始化
1：已与服务器建立连接
2：服务器接收到请求
3：服务器处理请求中
4：服务器响应结束

XMLHttpRequest对象的方法	说明
open(“GET”,“URL”,true)	作用：打开与服务器的连接。参数： 1.GET或POST，以什么方式打开连接。GET方式的参数在URL上传递。 2.URL服务器的访问地址. 3.true代码异步执行，false代码同步执行。
send()	作用：发送请求给服务器。

需求说明：
用户注册时输入一个用户名，失去焦点以后，通过ajax后台判断用户名是否存在。
服务器先不访问数据库，直接判断用户名，如果用户名为admin，则表示用户已经存在，否则用户名可以注册使用。
实现步骤：
1.创建一个Servlet用于接收用户名校验用户名，最后返回结果。
2.创建一个html页面发送异步请求给Servlet并且获取返回的结果更新到页面上。
示例代码：
CheckUsernameServlet代码

/*** 目标：检查用户名是否存在：admin 存在，否则不存在 */
@WebServlet(urlPatterns = "/check")
public class CheckUsernameServlet extends HttpServlet {
    @Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 设置内容类型和编码response.setContentType("text/html;charset=utf-8");// 获得字符打印流PrintWriter out = response.getWriter();// 1. 获取用户名String username = request.getParameter("username");// 2. 判断用户名是否存在if ("admin".equals(username)){
    // 3. 响应数据给浏览器out.println("已被注册");} else {
    out.println("可以使用");}}
}

html页面代码

 <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>注册页面</title><script>// 网页加载完毕执行window.onload = function () {
     // 1. 给文本输入框注册一个失去焦点事件document.getElementById("user").onblur = function () {
     // 2. 获得用户名字符串var username = this.value.trim();if (username.length == 0)return;// 3. 创建Ajax引擎对象：请求对象==>发送请求到服务器获取数据var request = new XMLHttpRequest();// 4. 监听准备状态值的变化：回调函数request.onreadystatechange = function () {
     // readyState状态值的范围0~4// 0：未初始化// 1：已与服务器建立连接// 2：服务器接收到请求// 3：服务器处理请求中// 4：服务器响应结束if (request.readyState == 4 && request.status == 200) {
     // 获取服务器响应数据并显示在页面元素上：span元素document.getElementById("info").innerHTML = request.responseText;}};// 5. 调用请求对象的open方法：与服务器建立连接// 参数1：请求方式// 参数2：请求地址// 参数3：是否异步请求，默认是true：异步 false：同步请求request.open("GET","check?username="+username,true);// 6. 调用请求对象的send方法：发送请求request.send();}}</script></head><body>用户名:<input type="text" name="username" id="user"><span id="info"></span></body></html>

05_ jQuery 异步请求方法1-全局 get 方法-[★★★★★]

get异步请求的参数有几个? 哪个参数是必须的?
四个，url参数必须：请求地址

请求参数的数据格式有几种? 分别是什么?
格式1：键=值&…
格式2：{键:值,…}

需求：使用jQuery提供的get方法完成检查用户名是否存在案例
HTML 页面代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>注册页面</title><script src="js/jquery-3.3.1.js"></script><script>// 监听网页加载完毕$(function () {
     // 注册失去焦点事件$("#user").blur(function () {
     // 1. 获取用户名var username = $(this).val().trim();if (username.length == 0) return;/*$.get(url, [data], [callback], [type])url：请求地址(必须)data：请求参数格式1：键1=值1&键2=值2 比如：username=jack&password=123格式2：{键1:值1,..}：JSON格式字符串，比如：{username:jack,password:123}callback：回调函数：接收服务器返回的数据type：指定服务器返回数据的类型常见类型值：text(默认值)，json，xml，html，script....*/// 发送异步请求：GET请求$.get("check", // 请求地址"username="+username, // 请求参数function (result) {
      // 回调函数$("#info").html(result);},"text" // 返回数据类型);});})</script></head>
<body>用户名:<input type="text" name="username" id="user"><span id="info"></span>
</body>
</html>

06_ jQuery 异步请求方法2-全局 post 方法-[★★★★★]

post方法提交异步请求相比get方法有什么好处？
POST提交相对安全，而且没有数据大小限制。

需求：使用jQuery提供的post方法完成检查用户名是否存在案例
HTML 页面代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>注册页面</title><script src="js/jquery-3.3.1.js"></script><script>// 监听网页加载完毕$(function () {
     // 注册失去焦点事件$("#user").blur(function () {
     // 1. 获取用户名var username = $(this).val().trim();if (username.length == 0) return;/*$.post(url, [data], [callback], [type])url：请求地址(必须)data：请求参数格式1：键1=值1&键2=值2 比如：username=jack&password=123格式2：{键1:值1,..}：JSON格式字符串，比如：{username:jack,password:123}callback：回调函数：接收服务器返回的数据type：指定服务器返回数据的类型常见类型值：text(默认值)，json，xml，html，script....*/// 发送异步请求：post请求$.post("check", // 请求地址"username="+username, // 请求参数function (result) {
      // 回调函数$("#info").html(result);},"text" // 返回数据类型);});})</script></head>
<body>用户名:<input type="text" name="username" id="user"><span id="info"></span>
</body>
</html>

07_ jQuery 异步请求方法3-全局 ajax 方法-[★★★★★]

ajax方法发送异步请求比get/post方法有什么更好的地方？
有错误处理回调函数

需求：使用jQuery提供的ajax方法实现后台用户登录的功能。
案例说明：
1.页面上有用户名和密码两个文本框，点登录按钮，使用后台AJAX完成登录成功。
2.如果用户登录成功显示登录成功，否则显示登录失败。
3.后台服务器暂不使用数据库，如果用户名为：admin，密码为：123，则登录成功。

服务器端实现

LoginServlet实现步骤

设置响应类型和获取打印流对象
获得用户名和密码
判断用户名和密码是否正确
如果正确则返回：欢迎您，admin，登录成功
错误则返回：登录失败

LoginServlet实现代码

/*** 目标：实现用户登录*/
@WebServlet(urlPatterns = "/login")
public class LoginServlet extends HttpServlet {
    @Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 设置内容类型和编码response.setContentType("text/html;charset=utf-8");// 获得字符打印流PrintWriter out = response.getWriter();// 0. 设置请求参数编码request.setCharacterEncoding("utf-8");// 1. 获取用户名和密码String username = request.getParameter("username");String password = request.getParameter("password");// 2. 判断是否正确if ("admin".equals(username) && "123".equals(password)) {
    // 3. 响应数据给浏览器out.println("欢迎你，"+username +"，登录成功");} else {
    out.println("登录失败");}}
}

前端页面实现

login.html实现步骤

页面上有一个登录的表单数据。注：登录按钮是一个普通的button
给登录按钮添加点击事件
得到表单中所有的数据项
使用$.ajax方法提交数据给服务器，设置url请求地址,data数据,method发送方式,dataType返回数据类型,success成功的回调函数，等属性。
在回调函数中直接使用alert弹出服务器返回的数据

login.html页面代码

<html>
<head><meta charset="utf-8"><title>用户登录</title>
</head>
<body>
<h1>用户登录</h1><form action="login" id="loginForm">用户名：<input id="name" type="text" name="username"><br>密码：<input id="password" type="password" name="password"><br><input id="login" type="button" value="登录"></form>
</body><script src="js/jquery-3.3.1.js"></script>
<script>// 监听登录按钮点击$("#login").click(function () {
     // $.ajax([settings]) 只有一个对象做为参数，这个对象有多个属性/**settings：是JSON对象，常用属性值如下：url: 请求地址data: 请求参数格式1：username=admin&password=123method: 请求方式dataType: 服务器响应数据类型success: 成功回调error: 错误回调async: 是否异步，默认是true*/// 获取表单数据var data = $("#loginForm").serialize();// 调用ajax方法发送异步请求实现登录$.ajax({
     url:"login", // 请求地址data:data, // 请求参数method:"get", // 请求方式dataType:"text", // 响应数据类型success:function (result) {
      // 成功回调alert(result);},error:function () {
      // 失败回调// 一般给用户一个友好提交alert("服务器忙...");}})});</script>
</html>

08_ jQuery 3.0 新增方法-全局 get 和 post 方法-[★★★★]

jQuery3.0新增get/post方法比原有ajax方法更好在什么地方?
直接写明了请求方法类型，代码更加简洁。
以后推荐大家使用jQuery3.0的新增的get或post方式发送异步请求。

需求：使用 jQuery 3.0 新增的 get 和 post 方法发送异步请求
login02.html页面代码（get）

<html>
<head><meta charset="utf-8"><title>用户登录</title>
</head>
<body>
<h1>用户登录</h1><form action="login" id="loginForm">用户名：<input id="name" type="text" name="username"><br>密码：<input id="password" type="password" name="password"><br><input id="login" type="button" value="登录"></form>
</body><script src="js/jquery-3.3.1.js"></script>
<script>// 监听登录按钮点击$("#login").click(function () {
     // jq3.0新增的get方法发送异步请求// $.get([settings])只有一个对象做为参数，这个对象有多个属性/**settings：是JSON对象，常用属性值如下：url: 请求地址data: 请求参数格式1：username=admin&password=123method: 请求方式dataType: 服务器响应数据类型success: 成功回调error: 错误回调async: 是否异步，默认是true*/// 获取表单数据var data = $("#loginForm").serialize();// 调用ajax方法发送异步请求实现登录$.get({
     url:"login", // 请求地址data:data, // 请求参数success:function (result) {
      // 成功回调alert(result);},error:function () {
      // 失败回调// 一般给用户一个友好提交alert("服务器忙...");}})});</script>
</html>

login03.html页面代码（post）

<html>
<head><meta charset="utf-8"><title>用户登录</title>
</head>
<body>
<h1>用户登录</h1><form action="login" id="loginForm">用户名：<input id="name" type="text" name="username"><br>密码：<input id="password" type="password" name="password"><br><input id="login" type="button" value="登录"></form>
</body><script src="js/jquery-3.3.1.js"></script>
<script>// 监听登录按钮点击$("#login").click(function () {
     // jq3.0新增的post方法发送异步请求// $.post([settings])只有一个对象做为参数，这个对象有多个属性/**settings：是JSON对象，常用属性值如下：url: 请求地址data: 请求参数格式1：username=admin&password=123method: 请求方式dataType: 服务器响应数据类型success: 成功回调error: 错误回调async: 是否异步，默认是true*/// 获取表单数据var data = $("#loginForm").serialize();// 调用ajax方法发送异步请求实现登录$.post({
     url:"login", // 请求地址data:data, // 请求参数success:function (result) {
      // 成功回调alert(result);},error:function () {
      // 失败回调// 一般给用户一个友好提交alert("服务器忙...");}})});</script>
</html>

09_ JSON 概述-[★★]

JSON是什么：一个特殊格式字符串

JSON的作用：用于异步请求时服务器与浏览器之间的数据传输

在使用ajax发送异步请求从服务器获取数据时，服务器返回的数据格式最常见莫过于JSON，偶尔也会有XML。

无论JSON还是XML都是一种特殊格式的字符串，按照特定的规则描述数据结构。

JSON 概述

JSON本质上，就是一个“特殊格式”的字符串。

JSON是网络上用来传输数据使用最广泛的数据格式之一。

JSON出生草根，是Javascript的子集，是Javascript的SON，专门用来描述数据结构。

json 的类型和语法

三种类型	语法	描述
对象类型	{键:值, 键:值}	代表一个对象，有多个属性名和属性值
数组/集合类型	[元素,元素,元素]	代表一个集合，有多个元素
混合类型	[{键:值},{键:值},{键:值}] {键: [元素,元素,元素]}	代表一个集合，有多个对象一个对象，某个属性是一个集合

JSON 值可以是：

数字（整数或浮点数）

字符串（在双引号中）

逻辑值（true 或 false）

数组（在中括号中）

对象（在大括号中）

null

10_ JSON 语法演示-[★★★★]

需求
需求1：创建一个JSON对象类型
需求2：创建一个数组，其中每个元素是JSON对象
需求3：创建一个JSON对象：某个属性值是一个集合：集体中每个元素是一个JSON对象
示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title><!--- 需求1：创建一个JSON对象类型- 需求2：创建一个数组，其中每个元素是JSON对象- 需求3：创建一个JSON对象：某个属性值是一个集合：集体中每个元素是一个JSON对象--><script>// 需求1：创建一个JSON对象类型var user = {
     "username":"孙悟空","nickName":"弼马温","age":20};// 输出JSON对象数据// document.write：将内容输出到网页上document.write("姓名：" + user.username + "<br>");document.write("昵称：" + user.nickName + "<br>");document.write("年龄：" + user.age + "<hr>");// 需求2：创建一个数组，其中每个元素是JSON对象var userList = [{
     "username":"孙悟空","nickName":"弼马温","age":20},{
     "username":"猪八戒","nickName":"天蓬元帅","age":28},{
     "username":"沙悟净","nickName":"卷帘大将","age":26}];// 遍历数组// for...of变量for(var user of userList){
     document.write("姓名：" + user.username + "<br>");document.write("昵称：" + user.nickName + "<br>");document.write("年龄：" + user.age + "<hr>");}// 需求3：创建一个JSON对象：某个属性值是一个集合：集体中每个元素是一个JSON对象var user = {
     username:"唐三藏",age:20,baobao:[{
     "username":"孙悟空","nickName":"弼马温","age":20},{
     "username":"猪八戒","nickName":"天蓬元帅","age":28},{
     "username":"沙悟净","nickName":"卷帘大将","age":26}]};document.write("姓名：" + user.username + "<br>");document.write("年龄：" + user.age + "<br>");document.write("徒弟如下：<hr>");for(var u of user.baobao){
     document.write("姓名：" + u.username + "<br>");document.write("昵称：" + u.nickName + "<br>");document.write("年龄：" + u.age + "<hr>");}</script>
</head>
<body></body>
</html>

11_ JSON 转换工具- Jackson 的使用-[★★★★]

jackson可以做什么? 将Java对象转换为JSON格式的字符串

jackson的核心类和方法分别是什么?
ObjectMapper
writeValueAsString

需求：使用Jackson工具将java对象或集合转换成json格式的字符串
Jackson工具使用步骤：
1.导入json相关jar包
jackson-annotations-2.2.3.jar
jackson-core-2.2.3.jar
jackson-databind-2.2.3.jar
2.创建java对象或集合
3.使用jackson的ObjectMapper对象的writeValueAsString方法进行转换

ObjectMapper对象中的方法	说明
String writeValueAsString(Object o)	将对象转成一个JSON格式的字符串形式

Jackson工具使用演示

实体类：User

public class User {
    private int id;private String username;private int age;public User(int id, String username, int age) {
    this.id = id;this.username = username;this.age = age;}@Overridepublic String toString() {
    return "User{" +"id=" + id +", username='" + username + '\'' +", age=" + age +'}';}public User() {
    }public int getId() {
    return id;}public void setId(int id) {
    this.id = id;}public String getUsername() {
    return username;}public void setUsername(String username) {
    this.username = username;}public int getAge() {
    return age;}public void setAge(int age) {
    this.age = age;}
}

测试类

public class TestJackson {
    public static void main(String[] args) throws Exception{
    // User对象User user = new User(1,"小波",20);// List<User>对象List<User> userList = new ArrayList<>();userList.add(new User(1,"小波",21));userList.add(new User(2,"小明",22));userList.add(new User(3,"小泽",23));// Map<String,Object>对象Map<String,Object> map  = new HashMap<>();map.put("username", "老王");map.put("age", 20);map.put("gender","男");map.put("user", new User(4,"小红",30));map.put("hobbies", new String[]{
    "写代码","撸代码","敲代码"});// String数组String[] strs = {
    "写代码","撸代码","敲代码"};// 1. 创建ObjectMapper对象ObjectMapper objectMapper = new ObjectMapper();// 2. 调用方法将Java对象转换为JSON字符// {"id":1,"username":"小波","age":20}System.out.println("User对象：" + objectMapper.writeValueAsString(user));// [{"id":1,"username":"小波","age":20},....]System.out.println("List对象：" + objectMapper.writeValueAsString(userList));// {"username":"老王",....}System.out.println("Map对象：" + objectMapper.writeValueAsString(map));// ["写代码","撸代码","敲代码"]System.out.println("字符串数组：" + objectMapper.writeValueAsString(strs));}
}

12_ JavaScrpit 操作 JSON 的方法-[★★★★]

语法	功能
JSON.parse(字符串)	将一个字符串转成JSON对象
JSON.stringify(JSON对象)	将一个JSON对象转成字符串

需求：

在JSON中键必须要使用双引号引起来
创建一个字符串：’{“name”: “张三”, “age”: 20}’，使用上面的方法转成JSON对象
再使用上面的方法，转回成字符串

示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JS中与JSON有关的函数</title>
</head>
<body>
<script type="text/javascript">/*需求：1. 在JSON中键必须要使用双引号引起来2. 创建一个字符串：'{"name": "张三", "age": 20}'， 使用上面的方法转成JSON对象3. 再使用上面的方法，转回成字符串* */// 字符串var jsonStr = '{"name": "张三", "age": 20}';// 将字符串转换为JSON对象var jsonObj = JSON.parse(jsonStr);document.write("name = " + jsonObj.name + ",age = " + jsonObj.age);// 将JSON对象转换为字符串var str = JSON.stringify(jsonObj);document.write("===> str = " + str);</script>
</body>
</html>

13_ Ajax 的跨域问题概述和演示-[★★]

什么是跨域：

一个服务器请求了另一个不同源(不同源：域名、端口号、协议三者有一个不同)的服务器

14_ Ajax 实现跨域访问方式-[★★★★]

服务器端需要设置哪个响应头实现资源可以跨域访问？

设置响应头：Access-Control-Allow-Origin

示例代码

@WebServlet(urlPatterns = "/demo01")
public class DemoServlet extends HttpServlet {
    @Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 设置内容类型和编码response.setContentType("text/html;charset=utf-8");// 设置响应头：Access-Control-Allow-Originresponse.setHeader("Access-Control-Allow-Origin", "*");// 获得字符打印流PrintWriter out = response.getWriter();out.println("我是demo01项目的响应：端口号：8888");}
}

15_案例-省市联动-[★★★★]

在这里插入图片描述

实体类

public class Area {
    private int id;private int pid; // 上一级idprivate String name;public Area() {
    }public Area(int id, int pid, String name) {
    this.id = id;this.pid = pid;this.name = name;}public int getId() {
    return id;}public void setId(int id) {
    this.id = id;}public int getPid() {
    return pid;}public void setPid(int pid) {
    this.pid = pid;}public String getName() {
    return name;}public void setName(String name) {
    this.name = name;}
}

AreaDao类

public class AreaDao {
    /*** 获取省市数据集合* @return*/public  Map<Integer, List<Area>> getAllArea(){
    HashMap<Integer, List<Area>> map = new HashMap<>();// 添加省份List<Area> provinces = new ArrayList<>();provinces.add(new Area(1, 0, "广东省"));provinces.add(new Area(2, 0, "湖南省"));provinces.add(new Area(3, 0, "广西省"));map.put(0, provinces);// 添加城市：广东省城市List<Area> cities01 = new ArrayList<>();cities01.add(new Area(4, 1, "广州市"));cities01.add(new Area(5, 1, "深圳市"));cities01.add(new Area(6, 1, "中山市"));map.put(1, cities01);// 添加城市：湖南省城市List<Area> cities02 = new ArrayList<>();cities02.add(new Area(7, 2, "郴州市"));cities02.add(new Area(8, 2, "长沙市"));cities02.add(new Area(9, 2, "衡阳市"));map.put(2, cities02);// 添加城市：广西省城市List<Area> cities03 = new ArrayList<>();cities03.add(new Area(10, 3, "桂林市"));cities03.add(new Area(11, 3, "南宁市"));cities03.add(new Area(12, 3, "柳州市"));map.put(3, cities03);return map;}/*public static void main(String[] args) {Map<Integer, List<Area>> allArea = getAllArea();System.out.println(allArea.get(3));}*//*** 根据pid查询城市或省份数据* pid=0，则代表查询的是省份数据*/public List<Area> findCitiesByPid(int pid){
    // 查询数据Map<Integer, List<Area>> allArea = getAllArea();return allArea.get(pid);}
}

AreaService类

public class AreaService {
    private AreaDao areaDao = new AreaDao();/*** 根据pid查询城市或省份数据* pid=0，则代表查询的是省份数据*/public List<Area> findCitiesByPid(int pid){
    return areaDao.findCitiesByPid(pid);}
}

AreaServlet类

// 查询省市数据
@WebServlet(urlPatterns = "/area")
public class AreaServlet extends HttpServlet {
    @Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 设置内容类型和编码response.setContentType("text/html;charset=utf-8");// 设置响应头：Access-Control-Allow-Originresponse.setHeader("Access-Control-Allow-Origin", "*");// 获得字符打印流PrintWriter out = response.getWriter();// 接收请求参数：pidString pid = request.getParameter("pid");// 调用业务层方法查询数据AreaService areaService = new AreaService();List<Area> cities = areaService.findCitiesByPid(Integer.parseInt(pid));// 将集合转换为JSON字符串String jsonStr = new ObjectMapper().writeValueAsString(cities);// 将JSON字符串返回给浏览器out.println(jsonStr);}
}

前端页面

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>省市级联</title><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><script type="text/javascript">// 当网页加载完毕执行$(function () {
     // 发送请求查询省份数据$.get({
     url:"area", // 请求地址data:{
     pid:0}, // 请求参数dataType:"json", // 设置服务器返回数据类型success:function (jsonArray) {
     // jsonArray是一个JSON对象// 遍历省份数组$(jsonArray).each(function (index, province) {
     // 创建option元素var option = $("<option value='"+province.id+"'>"+province.name+"</option>")// 将option添加到省份下拉列表中$("#province").append(option);})},error:function () {
     alert("服务器忙...");}});// 监听省份下拉框值改变事件$("#province").change(function () {
     $.get({
     url:"area", // 请求地址data:{
     pid:this.value}, // 请求参数dataType:"json", // 设置服务器返回数据类型success:function (jsonArray) {
     // jsonArray是一个JSON对象// 清空之前的城市数据$("#city > option:gt(0)").remove();// 遍历城市数组$(jsonArray).each(function (index, city) {
     // 创建option元素var option = $("<option value='"+city.id+"'>"+city.name+"</option>")// 将option添加到城市下拉列表中$("#city").append(option);})},error:function () {
     alert("服务器忙...");}});});});</script></head><body><select id="province"><option>---请选择省---</option></select><select id="city"><option>---请选择城市---</option></select>
</body>
</html>