文章目录
- AJAX&JSON
- 目标
- 01_全局和局部刷新概述-[★★]
- 02_Ajax概述-[★★]
- 03_同步请求与异步请求的区别-[★★]
- 04_原生 ajax 案例-异步校验用户名-[★]
- 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 的使用-[★★★★]
- 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 {
@Override
protected 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 {
@Override
protected 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=123
method: 请求方式
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=123
method: 请求方式
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=123
method: 请求方式
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;
}
@Override
public 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 {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 设置内容类型和编码
response.setContentType("text/html;charset=utf-8");
// 设置响应头：Access-Control-Allow-Origin
response.setHeader("Access-Control-Allow-Origin", "*");
// 获得字符打印流
PrintWriter out = response.getWriter();
out.println("我是demo01项目的响应：端口号：8888");
}
}
15_案例-省市联动-[★★★★]
- 实体类
public class Area {
private int id;
private int pid; // 上一级id
private 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 {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 设置内容类型和编码
response.setContentType("text/html;charset=utf-8");
// 设置响应头：Access-Control-Allow-Origin
response.setHeader("Access-Control-Allow-Origin", "*");
// 获得字符打印流
PrintWriter out = response.getWriter();
// 接收请求参数：pid
String 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>
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
