荐 jquery-ajxa

程序员文章站 2022-06-22 15:56:05

一、Web前端回顾1.1、HTML常用标签分类显示标签文本 font、label 图片 img声音 audio视频 video输入标签inputtext\password\radio\file\checkbox\button\reset\submit\image\date\number\colorselect optiontextarea布局标签br ul/li ol/litablepdivhr功能标签aform页面框架iframe...

一、Web前端回顾

1.1、HTML

常用标签

分类
显示标签	文本 font、label 图片 img 声音 audio 视频 video
输入标签	inputtext\password\radio\file\checkbox\button\reset\submit\image\date\number\color select option textarea
布局标签	br ul/li ol/li table p div hr
功能标签	a form
页面框架	iframe

1.2、CSS

盒子模型

常用样式

3D样式

transform: rotate(90deg) scale(2.0) translate(100px,-200px);

自定义动画

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/*定义动画*/
			@keyframes wahaha{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
			
			#myImg{
				width: 200px;
				height: 200px;
				border-radius: 50%;
				animation: wahaha 3s linear infinite;
			}
			
		</style>
	</head>
	<body>
		
		<img src="img/a.png" id="myImg"/>
	</body>
</html>

1.3、JavaScript

基础语法
内置对象（String\Math\RegExp\Date\Array\ global）
BOM对象（window\screen\navigator\location\history\document）

DOM对象—document

节点：标签、属性、文本

节点种类 nodeType nodeName nodeValue

标签 1 标签名 null

属性 2 属性名属性值

文本 3 #text 文本值

节点种类	nodeType	nodeName	nodeValue
标签	1	标签名	null
属性	2	属性名	属性值
文本	3	#text	文本值

选择节点

document.getElementById();
document.getElementsByName();
document.getElementsByClassName();
document.getElementsByTagName("img");

创建节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			function test4(){
				var cts = ["北京","上海","广州","深圳","大武汉"];
				var selectTag = document.getElementById("city");
				
				for(var i=0; i<cts.length; i++){
					
					var optionTag = document.createElement("option");  	//<option></option>
					optionTag.innerHTML = cts[i];						//<option>北京</option>
					optionTag.value = cts[i];							//<option value="北京">北京</option>
					
					selectTag.appendChild(optionTag);
				}
			}
		</script>
	</head>
	<body>
		<select id="city"></select>
		<hr>
		<button onclick="test4()">测试4</button>
	</body>
</html>

添加子节点
删除节点
替换节点

二、AJAX

前端提交数据到服务端的方式：同步和异步

同步

异步

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UsO0JpoR-1594747800840)(imgs/1594609040990.png)]

三、jQuery

3.1 概述

jQuery就是一个js函数库，为我们提供简便的HTML操作、属性操作、样式操作、事件处理、动画实现、ajax交互等Javascript操作

jQuery设计宗旨：write less,do more

3.2 jQuery特点

支持链式语法
支持高效灵活的CSS选择器
兼容各种主流浏览器
有丰富的插件 jQuery之家

3.3 安装使用

在网页中使用一个JS的函数库

npm安装
离线下载使用：
- 官网下载： https://jquery.com/
  - 生产环境（jQuery.*.min.js）https://code.jquery.com/jquery-3.5.1.min.js
  - 开发环境（jQuery.*.js）https://code.jquery.com/jquery-3.5.1.js
- 将js文件拷贝到项目中
- 在html文件引用jQuery.js文件
```
<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
```
使用CDN（Content Delivery NetWork）

3.4 基础使用

实例
基础语法： $(seclector).action(fn);

四、jQuery选择器

4.1 基础选择器

ID选择器：根据id获取HTML文档中的某一个元素
标签选择器：获取到当前文档中所有指定的标签元素
class选择器：根据class属性值获取HTML文档的元素

ID选择器 $("#ID属性值")

标签选择器 $(“标签名”)

class选择器 $(".class属性值")

ID选择器	$("#ID属性值")
标签选择器	$(“标签名”)
class选择器	$(".class属性值")

4.2 复合选择器

多个选择器的组合关系

	说明
selector1,selector2	获取selector1和selector2并集
selector1 selector2	获取selector1选择元素下的所有符合selector2的元素（父标签后代标签）
selector1>selector2	获取selector1选择元素下的子标签中符合 selector2的元素（父标签子标签）
selector1+selector2	获取紧挨着selector1元素的selector2的元素
selector1~selector2	获取selector1元素后面的所有同级的selector2的元素

4.3 过滤器

索引过滤器


:first	$(“tr:first”) 获取第一个tr元素
:last	$(“tr:last”) 获取最后一个tr元素
:eq(index)	$(“tr:eq(index)”) 先获取所有的tr，再过滤指定索引的某一个tr
:gt(index)	$(“tr:gt(index)”) 获取所有tr中大于指定索引的tr
:lt(index)	$(“tr:lt(index)”) 获取所有tr中小于指定索引的tr

奇偶过滤


:even	$(“tr:even”) 获取所有tr中索引为偶数的tr（奇数行）
:odd	$(“tr:odd”) 获取所有tr中索引为奇数的tr（偶数行）

属性过滤器


[attrName 运算符 attrValue]	从选择器选择的元素中，过滤满足[]指定的属性条件的元素

可见性过滤器


:hidden	$(":hidden") 获取当前HTML文档中所有隐藏的元素<br />$ (“img:hidden”) 获取HTML文档中所有隐藏的img
:visible	$(":visible") 获取当前HTML文档中所有可见的元素<br />$ (“img:visible”) 获取HTML文档中所有可见的img

表单过滤器


:input	$(":input") 获取当前HTML文档中所有的input元素<br />$ ("#form1 :input") 获取指定表单中的所有的input元素
:text
:password
:radio
:checkbox

五、jQuery筛选

根据选择器选择的元素再进行条件的筛选

$(“selector”).first()

六、jQuery事件处理

事件：就是在html文档中发生的例如鼠标点击、键盘输入等动作

6.1 jQuery事件处理方式

$(selector).action(fn);

6.2 jQuery常用事件

荐
jquery-ajxa

七、jQuery操作元素的属性和样式

7.1 属性操作

使用jQuery改变元素的属性/获取元素的属性值

value属性操作

//获取元素的value属性值
var v = $(selector).val();

//设置元素的value属性值
$(selector).val(v);

其他属性操作

//获取其他属性值
var v = $(selector).attr("attrName");

//设置其他属性值
$(selector).attr("attrName","attrValue");

//移除某个属性
$(selector).removeAttr("attrName");

class属性

//添加css样式
$(selector).addClass("css style name");

//移除css样式
$(selector).removeClass("css style name");

//取反css样式
$(selector).toggleClass("css style name");

html和text操作：设置/获取元素的innerHTML

<div id="div1" style="width: 200px; height: 100px; border: 1px solid green;"></div>
<button id="btn6">设置div标签中的内容</button>

$("#btn6").click(function(){
	//$("#div1").text("<label style='color:red;text-shadow:green 3px 3px 3px'>从前有座山</label>");
	$("#div1").html("<label style='color:red;text-shadow:green 3px 3px 3px'>从前有座山</label>");
	//var v = $("#div1").text();
});

7.2 样式操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<div id="div1" style="width: 300px; height: 300px; border: 2px solid deepskyblue; overflow: scroll;
			position: absolute; left: 200px; top: 100px; border-radius: 50%;">
			<img src="img/e.jpg" />
		</div>
		
		<button id="btn1">获取偏移数据</button>
		<button id="btn2">获取滚动条偏移数据</button>
		<button id="btn3">获取样式值</button>
		<button id="btn4">设置样式值</button>
	</body>
	
	<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
	<script type="text/javascript">
		$(function(){
			//设置滚动偏移
			$("#div1").scrollLeft(353);
			$("#div1").scrollTop(210);
		});
		$("#btn1").click(function(){
			var p = $("#div1").position();
			alert(p.left +"*"+p.top);
		});
		$("#btn2").click(function(){
			//获取div的横向滚动偏移
			var sleft = $("#div1").scrollLeft();
			//获取div纵向滚动偏移
			var stop = $("#div1").scrollTop();
			alert(sleft +"*"+stop);
			
		});
		
		
		$("#btn3").click(function(){
			var left = $("#div1").css("left");
			var br = $("#div1").css("borderRadius");
			alert(left + "*"+br);
		});
		
		$("#btn4").click(function(){
			$("#div1").css("left","600px");
			$("#div1").css("borderRadius","20px");
		});
		
	</script>
</html>

八、jQuery效果

jQuery效果：对元素显示和隐藏的效果

8.1 show、hide

<div id="div1" style="width: 100px; height: 100px; background: red;"></div>
<button id="btn1">测试hide()</button>
<button id="btn2">测试show()</button>
<button id="btn3">测试toggle()</button>

$("#btn1").click(function(){
    $("#div1").hide();
});

$("#btn2").click(function(){
    $("#div1").show();
});

$("#btn3").click(function(){
    $("#div1").toggle();
});

8.2 slide效果

<div id="div2" style="width: 100px; height: 100px; background: blue;"></div>
<button id="btn4">测试slideDown()</button>
<button id="btn5">测试slideUp()</button>
<button id="btn6">测试slideToggle()</button>

$("#btn4").click(function(){
    $("#div2").slideDown();
});

$("#btn5").click(function(){
    $("#div2").slideUp();
});

$("#btn6").click(function(){
    $("#div2").slideToggle();
});

8.3 淡入淡出

<div id="div3" style="width: 100px; height: 100px; background: green;"></div>
<button id="btn7">测试fadeIn-显示</button>
<button id="btn8">测试fadeOut()-隐藏</button>
<button id="btn9">测试fadeToggle()</button>
<button id="btn10">测试fadeTo()</button>

$("#btn7").click(function(){
    $("#div3").fadeIn(3000);
});

$("#btn8").click(function(){
    $("#div3").fadeOut(3000);
});

$("#btn9").click(function(){
    $("#div3").fadeToggle();
});		
$("#btn10").click(function(){
    $("#div3").fadeTo(2000,0.3);
});

8.4 效果函数的参数

效果函数可以有三个参数

speed 效果完成的时间（“slow”,“normal”,“fast”）或者毫秒数

easing 默认“swing” 可选“linear”

fn 效果完成之后的回调函数

//$("#div2").slideUp();
//$("#div2").slideUp(3000);
//$("#div2").slideUp("fast");

//$("#div2").slideUp(function(){
//	alert("隐藏完毕");
//});

//$("#div2").slideUp(3000,function(){
//	alert("隐藏完毕");
//});

$("#div2").slideUp(3000,"linear",function(){
    alert("隐藏完毕");
});

8.5 动画

<div id="div4" style="width: 30px; height: 30px; background: purple; border-radius:50% ; 
                      position: relative; top: 0px; left: 0px;"></div>
<button id="btn11">测试animate</button>
<button id="btn12">测试stop</button>

$("#btn11").click(function(){
    //移动
    $("#div4").animate({left:"100px",top:"0px"},1000);
    $("#div4").animate({left:"100px",top:"100px"},1000);
    $("#div4").animate({left:"0px",top:"100px"},1000);
    $("#div4").animate({left:"0px",top:"0px"},1000);
});		
$("#btn12").click(function(){
    $("#div4").stop();
});

九、DOM操作

DOM操作就是对HTML文档中元素的操作

操作元素的属性和样式

节点操作

9.1 添加子节点

parent.append(child、HTMLstring) 在当前父节点中拼接新的子节点（在原有的内容的后面拼接）
```
$("#div1").append("<img src='img/a.jpg' width='30' />");
$("#div1").append( $("#zlyImg"));
```
child.appendTo(parent) 将child节点作为子节点拼接的parent中（在原有的内容的后面拼接）
```
$("#zlyImg").appendTo( "#div1");
$("#zlyImg").appendTo( $("#div1"));
```
parent.prepend(child) 在当前父节点中拼接新的子节点（在原有的内容的前面插入节点）
```
$("#div1").prepend("<img src='img/a.jpg' width='30' />");
$("#div1").prepend( $("#zlyImg"));
```
child.prependTo(parent) 将child节点作为子节点拼接的parent中（在原有的内容的前面插入节点）
```
$("#zlyImg").prependTo( "#div1");
$("#zlyImg").prependTo( $("#div1"));
```

9.2 插入节点

node1.after(node2、HTMLstring) 将node2插入到node1之后
node1.before(node2、HTMLstring) 将node2插入到node1之前

9.3 替换节点

oldNode.replaceWith(newNode) 使用newNode替换oldNode

9.4 移除节点

oldNode.remove() 移除当前节点

9.5 节点包裹

node1.wrap(node2、HTMLstring) 使用node2包裹node1
node1.unwrap() 去除node1的父节点

9.6 清除子节点

parent.html("");
parent.empty();

十、AJAX

10.1 AJAX复习

案例：验证用户名是否可用

步骤一：服务器接口

创建用于响应ajax请求的ResultVO

public class ResultVO {
    private int code;   // 0 表示成功 ； 1 表示失败
    private String msg; // 返回给前端的提示信息
    private Object data; // 返回给前端携带的数据
}

创建一个用于将Java对象转换成JSON的帮助类

public class JSONUtil {

    public String toJsonString(Object obj) throws Exception {
        StringBuilder builder =  new StringBuilder("{");
        Class c = obj.getClass();
        Field[] fs = c.getDeclaredFields();
        for (int i=0 ; i<fs.length ; i++) {
            Field f = fs[i];
            String name = f.getName();   //code
            String methodName = "get"+name.substring(0,1).toUpperCase()+name.substring(1);  // getCode
            Method m = c.getDeclaredMethod(methodName);     // 获取当前属性的get方法
            Object value = m.invoke(obj);

            builder.append("\""+name+"\":"+  (f.getType().toString().equals("class java.lang.String")?"\""+value+"\"":value ));

            if(i<fs.length-1){
                builder.append(",");
            }else{
                builder.append("}");
            }
        }
        return builder.toString();
    }
    

}

创建用于接收ajax请求并进行响应的的servlet类

@WebServlet("/checkname")
public class CheckUsernameServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            String username = request.getParameter("username");

            ResultVO vo = null;
            if(username.startsWith("admin") || username.length()<8 || username.length()>20 ){
                //用户名不可用
                vo = new ResultVO(1,"用户名已经被占用！");
            }else{
                //用户名可用
                vo = new ResultVO(0,"用户名可用！");
            }

            //将vo转换成JSON格式字符串
            String jsonstr = new JSONUtil().toJsonString(vo);
            //将json字符串通过输出流响应给请求者
            response.setCharacterEncoding("utf-8");
            response.setContentType("application/json;charset=utf-8");
            PrintWriter out = response.getWriter();
            out.println(jsonstr);
            out.flush();
            out.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

步骤二：前端发送ajax请求

Javascript实现ajax请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="userName"/><label></label>
		<button onclick="checkUsername()">检查用户名是否可用</button>
	</body>
	<script type="text/javascript">
		var ajaxReq;
		
		function checkUsername(){
			//1.创建ajax请求对象
			
			if(window.XMLHttpRequest){
				ajaxReq = new XMLHttpRequest();
			}else{
				alert("请更换更新版本的浏览器...");
			}
			
			//0   请求对象已经创建，但是没有进行初始化
			//1   完成初始化，但未与服务器建立连接
			//2 请求已经达到服务器，但未获得相应
			//3 ajax请求与服务器进行通信
			//4 服务器相应完成
			
			//2.封装请求数据
			var username = document.getElementById("userName").value;
			var url = "http://localhost:8080/webserver_war_exploded/checkname?username="+username;
			ajaxReq.open("GET",url,true);
			
			//3.指定回调函数
			ajaxReq.onreadystatechange = callback;
			
			//4.发送请求
			ajaxReq.send(null);
			
		}
		
		function callback(){
			if(ajaxReq.readyState == 4 && ajaxReq.status==200){
				var str = ajaxReq.responseText;
				alert(str);
			}
		}
		
	</script>
</html>

步骤三：解决ajax跨域请求的问题

跨域：发送请求的客户端与接收请求的服务端不在同一个应用服务器（ip或者port不一样）

//设置允许跨域
response.setHeader("Access-Control-Allow-Origin","*");      //设置允许跨域
response.setHeader("Access-Control-Allow-Methods","*");     //设置允许多种请求方式
response.setHeader("Access-Control-Max-Age","3600");        //设置跨域缓存的最大时间
response.setHeader("Access-Control-Allow-Headers","*");     //设置允许携带header
response.setHeader("Access-Control-Allow-Credentials","*"); //设置允许携带cookie

步骤四：在前端处理ajax的结果

在ajax的回调函数中处理结果

function callback(){
    if(ajaxReq.readyState == 4 && ajaxReq.status==200){
        var str = ajaxReq.responseText;
        var obj = eval("("+str+")");

        console.log(obj);

        document.getElementById("tips").innerHTML = obj.msg;
        if(obj.code == 0){
            document.getElementById("tips").style.color="green";
        }else{
            document.getElementById("tips").style.color="red";
        }
    }
}

10.2 jQuery AJAX

$.get(url,[data],[fn],[type])

url 表示请求路径
data 表示ajax请求传递给服务器(servlet)的值
fn 请求完成之后的回调函数
type 声明服务器响应的数据格式（html,text,xml,json）

var url = "http://localhost:8080/webserver_war_exploded/checkname?username="+$("#userName").val();
$.get(url,function(res){
    $("#tips").html(res.msg);
    if(res.code==0){
        $("#tips").css("color","green");
    }else{
        $("#tips").css("color","red");
    }
});

$.post(url,[data],[fn],[type])

var url = "http://localhost:8080/webserver_war_exploded/checkname";
$.post(url,{username:$("#userName").val()},function(res){
    $("#tips").html(res.msg);
    if(res.code==0){
        $("#tips").css("color","green");
    }else{
        $("#tips").css("color","red");
    }
},"json");

$.ajax(settings) 支持自定义的异步请求设置

$.ajax({
    url:"http://localhost:8080/webserver_war_exploded/checkname",
    type:"post",
    data:{username:$("#userName").val()},
    headers:{

    },
    beforeSend:function(){

    },
    success:function(res){
        //回调函数：当服务器成功相应之后，执行此函数
        $("#tips").html(res.msg);
        if(res.code==0){
            $("#tips").css("color","green");
        }else{
            $("#tips").css("color","red");
        }
    },
    error:function(){

    },
    complete:function(){

    }
});

十一、案例：省市区联动

荐
jquery-ajxa

数据流图

荐
jquery-ajxa

11.1 数据表设计

mysql> create database db_pca;
Query OK, 1 row affected (0.00 sec)

mysql> use db_pca;
Database changed
mysql> create table tb_provinces(
    -> pid int primary key auto_increment,
    -> pname varchar(50) not null
    -> )charset=utf8;
Query OK, 0 rows affected (0.02 sec)

mysql> create table tb_cities(
    -> cid int primary key auto_increment,
    -> cname varchar(50) not null,
    -> pid int,
    -> constraint fk_cp foreign key(pid) references tb_provinces(pid)
    -> )charset=utf8;
Query OK, 0 rows affected (0.01 sec)

mysql> create table tb_areas(
    -> aid int primary key auto_increment,
    -> aname varchar(100) not null,
    -> cid int,
    -> constraint fk_ac foreign key(cid) references tb_cities(cid)
    -> )charset=utf8;
Query OK, 0 rows affected (0.02 sec)

添加数据

11.2 完成数据库操作

导入数据库驱动

创建实体类

public class Province {
    private int pid;
    private String pname;
}

public class City {
    private int cid;
    private String cname;
}

创建帮助类

public class DBUtil {

    private static final String DRIVER = "com.mysql.jdbc.Driver";
    private static final String URL = "jdbc:mysql://localhost:3306/db_pca";
    private static final String USERNAME = "root";
    private static final String PASSWORD = "admin123";
    private static ThreadLocal<Connection> local = new ThreadLocal<>();

    static {
        try {
            Class.forName(DRIVER);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    public static Connection getConnection() {
        Connection connection = local.get();
        try {
            if (connection == null) {
                connection = DriverManager.getConnection(URL, USERNAME, PASSWORD);
                local.set(connection);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return connection;
    }

    //自行完成关闭连接
}

DAO完成查询操作

public class ProvinceDAO {

    private Connection conn;
    private PreparedStatement psmt;
    private ResultSet rs;

    public List<Province> listProvinces()  {
        List<Province> pros = new ArrayList<>();
        try {
            conn = DBUtil.getConnection();
            String sql = "select * from tb_provinces";
            psmt = conn.prepareStatement(sql);
            rs = psmt.executeQuery();
            while(rs.next()){
                int pid = rs.getInt("pid");
                String pname = rs.getString("pname");
                Province p = new Province(pid,pname);
                pros.add(p);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return pros;
    }

}

public class CityDAO {

    private Connection conn;
    private PreparedStatement psmt;
    private ResultSet rs;

    public List<City> listCitiesByPid(int pid){
        List<City> cities = new ArrayList<>();
        try {
            conn = DBUtil.getConnection();
            String sql = "select * from tb_cities where pid = ?";
            psmt = conn.prepareStatement(sql);
            psmt.setInt(1,pid);
            rs = psmt.executeQuery();
            while(rs.next()){
                int cid = rs.getInt("cid");
                String cname = rs.getString("cname");
                City city = new City(cid,cname);
                cities.add(city);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return cities;
    }

}

11.3 完成Service层

创建服务接口

public interface ProvinceService {
    public List<Province> listProvinces();
}

public interface CityService {
    public List<City> listCities(int pid);
}

创建服务实现类

public class ProvinceServiceImpl implements ProvinceService {

    private ProvinceDAO provinceDAO = new ProvinceDAO();

    @Override
    public List<Province> listProvinces() {
        return provinceDAO.listProvinces();
    }
}

public class CityServiceImpl implements CityService {

    private CityDAO cityDAO = new CityDAO();

    @Override
    public List<City> listCities(int pid) {
        return cityDAO.listCitiesByPid(pid);
    }
}

11.4 创建Servlet处理ajax请求

创建用于封装ajax响应数据的ResultVO

public class ResultVO {
    private int code;
    private String msg;
    private Object data;
}

创建ListProvincesServlet，返回省份信息

@WebServlet("/ListProvincesServlet")
public class ListProvincesServlet extends HttpServlet {

    private ProvinceService provinceService = new ProvinceServiceImpl();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.查询省份信息
        List<Province> provinces = provinceService.listProvinces();

        //2.将省份信息封装到vo中
        ResultVO vo = new ResultVO(0,"success",provinces);

        //3.将vo转换成JSON格式
        String jsonstr = new Gson().toJson(vo);

        response.setHeader("Access-Control-Allow-Origin","*");      //设置允许跨域
        response.setHeader("Access-Control-Allow-Methods","*");     //设置允许多种请求方式
        response.setHeader("Access-Control-Max-Age","3600");        //设置跨域缓存的最大时间
        response.setHeader("Access-Control-Allow-Headers","*");     //设置允许携带header
        response.setHeader("Access-Control-Allow-Credentials","*"); //设置允许携带cookie

        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.println(jsonstr);
        out.flush();
        out.close();

    }
}

创建ListCitiesByPidServlet，返回城市信息

@WebServlet("/ListCitiesByPidServlet")
public class ListCitiesByPidServlet extends HttpServlet {

    private CityService cityService = new CityServiceImpl();
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String pid1 = request.getParameter("pid");
        int pid = pid1!=null?Integer.parseInt(pid1):1;

        List<City> cities = cityService.listCities(pid);

        ResultVO vo = new ResultVO(0,"success",cities);

        String jsonstr = new Gson().toJson(vo);

        response.setHeader("Access-Control-Allow-Origin","*");      //设置允许跨域
        response.setHeader("Access-Control-Allow-Methods","*");     //设置允许多种请求方式
        response.setHeader("Access-Control-Max-Age","3600");        //设置跨域缓存的最大时间
        response.setHeader("Access-Control-Allow-Headers","*");     //设置允许携带header
        response.setHeader("Access-Control-Allow-Credentials","*"); //设置允许携带cookie

        response.setCharacterEncoding("utf-8");
        response.setContentType("application/json;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.println(jsonstr);
        out.flush();
        out.close();

    }
}

11.5 前端完成省市区联动

jQuery实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			select{
				width: 120px;
				height: 25px;
				border:1px lightgray solid;
				border-radius: 3px;
				color: gray;
			}
		</style>
	</head>
	<body>
		<select id="province">
			<option value="0">-请选择-</option>
		</select>
		<select id="city">
			<option>-请选择-</option>
		</select>
		<select id="area">
			<option>-请选择-</option>
		</select>
		
	</body>
	<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
	<script type="text/javascript">
		$(function(){
			$.get("http://localhost:8080/pca/ListProvincesServlet",function(res){
				if(res.code == 0){
					var arr = res.data;
					for(var i=0; i<arr.length; i++){
						var optionStr = "<option value='"+arr[i].pid+"'>"+arr[i].pname+"</option>";
						$("#province").append(optionStr);	
					}
				}
			});
		});
		
		
		$("#province").change(function(){
			var provinceId = $("#province").val();
			$("#city").html("<option value='0'>-请选择-</option>");
			if(provinceId != "0"){
				$.post("http://localhost:8080/pca/ListCitiesByPidServlet",{pid:provinceId},function(res){
					var arr = res.data;
					for(var i=0; i<arr.length; i++){
						var optionStr = "<option value='"+arr[i].cid+"'>"+arr[i].cname+"</option>";
						$("#city").append(optionStr);	
					}
				});
			}
			
		});
		
	</script>
</html>

ect id=“city”>
-请选择-

-请选择-

</body>
<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
	$(function(){
		$.get("http://localhost:8080/pca/ListProvincesServlet",function(res){
			if(res.code == 0){
				var arr = res.data;
				for(var i=0; i<arr.length; i++){
					var optionStr = "<option value='"+arr[i].pid+"'>"+arr[i].pname+"</option>";
					$("#province").append(optionStr);	
				}
			}
		});
	});
	
	
	$("#province").change(function(){
		var provinceId = $("#province").val();
		$("#city").html("<option value='0'>-请选择-</option>");
		if(provinceId != "0"){
			$.post("http://localhost:8080/pca/ListCitiesByPidServlet",{pid:provinceId},function(res){
				var arr = res.data;
				for(var i=0; i<arr.length; i++){
					var optionStr = "<option value='"+arr[i].cid+"'>"+arr[i].cname+"</option>";
					$("#city").append(optionStr);	
				}
			});
		}
		
	});
	
</script>

本文地址：https://blog.csdn.net/qq_40298175/article/details/107351756

荐 jquery-ajxa

一、Web前端回顾

1.1、HTML

1.2、CSS

1.3、JavaScript

二、AJAX

三、jQuery

3.1 概述

3.2 jQuery特点

3.3 安装使用

3.4 基础使用

四、jQuery选择器

4.1 基础选择器

4.2 复合选择器

4.3 过滤器

五、jQuery筛选

六、jQuery事件处理

6.1 jQuery事件处理方式

6.2 jQuery常用事件

七、jQuery操作元素的属性和样式

7.1 属性操作

7.2 样式操作

八、jQuery效果

8.1 show、hide

8.2 slide效果

8.3 淡入淡出

8.4 效果函数的参数

8.5 动画

九、DOM操作

9.1 添加子节点

9.2 插入节点

9.3 替换节点

9.4 移除节点

9.5 节点包裹

9.6 清除子节点

十、AJAX

10.1 AJAX复习

步骤一：服务器接口

步骤二：前端发送ajax请求

步骤三：解决ajax跨域请求的问题

步骤四：在前端处理ajax的结果

10.2 jQuery AJAX

$.get(url,[data],[fn],[type])

$.post(url,[data],[fn],[type])

$.ajax(settings) 支持自定义的异步请求设置

十一、案例：省市区联动

数据流图

11.1 数据表设计

11.2 完成数据库操作

11.3 完成Service层

11.4 创建Servlet处理ajax请求

11.5 前端完成省市区联动

荐 Java中的螺丝屑

荐 细谈Python列表(list)介绍以及操作方法

荐 python爬虫实战1-基础代码篇1

荐 Python数字图像处理——OpenCV实例解析

荐 可视化工具不知道怎么选？深度评测5大Python数据可视化工具

荐 Python之数据分析（Numpy中读取与保存数据文件、将数据文件制成K线图）

荐 文件下载文件中文名问题

荐 使用IDEA搭建一个简单的JavaWeb图书管理项目（详细步骤指导、提供源码）

荐 Maven写rabbitMQ教程02

荐 Java连接mysql数据库的详细教程

荐细谈Python列表(list)介绍以及操作方法

荐可视化工具不知道怎么选？深度评测5大Python数据可视化工具

荐文件下载文件中文名问题

荐使用IDEA搭建一个简单的JavaWeb图书管理项目（详细步骤指导、提供源码）