Jquery

最新推荐文章于 2023-07-01 20:34:28 发布

NULL_KUN

最新推荐文章于 2023-07-01 20:34:28 发布

阅读量323

点赞数

分类专栏： Java进阶文章标签： js css html

本文链接：https://blog.csdn.net/weixin_44255829/article/details/107358423

版权

Java进阶专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、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

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

同步

异步

在这里插入图片描述

三、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]	从选择器选择的元素中，过滤满足[]指定的属性条件的元素
	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iC2SLvpk-1594789285860)(imgs/1594624238329.png)]

可见性过滤器


:hidden	$(" : h i d d e n ") 获取当前 H T M L 文档中所有隐藏的元素 < b r / >$ (“img:hidden”) 获取HTML文档中所有隐藏的img
:visible	$(" : v i s i b l e ") 获取当前 H T M L 文档中所有可见的元素 < b r / >$ (“img:visible”) 获取HTML文档中所有可见的img

表单过滤器


:input	$(" : i n p u t ") 获取当前 H T M L 文档中所有的 i n p u t 元素 < b r / >$ ("#form1 :input") 获取指定表单中的所有的input元素
:text
:password
:radio
:checkbox

五、jQuery筛选

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

$(“selector”).first()

六、jQuery事件处理

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

6.1 jQuery事件处理方式

$(selector).action(fn);

6.2 jQuery常用事件

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

七、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、toggle

<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>

<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
    $("#btn1").click(function(){
    $("#div1").hide();
});

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

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

</script>

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 效果完成之后的回调函数

$("#btn5").click(function(){
    //				$("#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; position: relative;top: 0px;left: 0px;border-radius: 50%;"></div>
		<button id="btn11">测试animate()</button>
		<button id="btn12">测试stop()</button>

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

九、DOM操作

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

操作元素的属性和样式
节点操作

9.1 添加子节点

parent.append(child、HTMLstring) 在当前父元素中拼接新的子节点。在原有的内容后面拼接

$("#btn1").click(function(){
//				$("div1").append("<img src='img/a.jpg' width='30'/>");
//				$("div1").html("<img src='img/a.jpg' width='30'/>");
$("#div1").append($("#zlying"));

});

child.appendTo(parent)将child节点作为子节点拼接在parent中

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

parent.prepend(child)将当前父节点中拼接新的子节点（在原有的内容的前面插入节点）
```
$("#btn3").click(function(){
$("#div1").prepend($("#zlying"));

});
```
child.prependTo(parent)将child节点作为子节点拼接在parent中（在原有的内容的前面插入节点）
```
$("#zlying").appendTo("#div1");
$("#zlying").appendTo($("#div1"));
```

9.2 插入节点

nodel.after(node2、HTMLstring)将node2插入到node1之后
nodel.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():

附：jQuery让渡

如果页面中使用多个JavaScript库，都使用$符号作为简写。出现冲突。则可直接使用jQuery或者重新赋变量值。

var jq = $.noConflict();

十、AJAX

10.1 AJAX复习

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

步骤一：服务器接口

创建用于响应ajax请求的ResultVo

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

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

import java.lang.reflect.Field;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;

public class JSONUtil {
    public String toJsonString(Object obj) throws NoSuchMethodException, InvocationTargetException, IllegalAccessException {
        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();
            String methodName = "get"+name.substring(0,1).toUpperCase()+name.substring(1);
            Method m = c.getDeclaredMethod(methodName);//获取当前属性的get方法
            Object value= m.invoke(obj);
//            System.out.println(name+"---"+value);
            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类

import com.ajax.beans.ResultVO;
import com.ajax.utils.JSONUtil;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/checkName")
public class CheckUsernameServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        //将vo转换为json格式字符串
        try {
            String username = req.getParameter("username");
            ResultVO vo = null;
            if (username.startsWith("admin")|| username.length()<8|| username.length()>20){//伪类
                //用户名不可用
                vo = new ResultVO(1,"用户名被占用",null);
            }else{
                //用户名可用
                vo = new ResultVO(0,"用户名可用",null);
            }
            //将vo转换成JSON格式字符串
            String jsonString = new JSONUtil().toJsonString(vo);
            //将json字符串通过输出流响应给请求者
            //设置允许跨域
           resp.setHeader("Access-Control-Allow-Origin","*");//设置允许跨域
           resp.setHeader("Access-Control-Allow-Methods","*");//设置允许多种请求方式
           resp.setHeader("Access-Control-Max-Age","3600");//设置跨域缓存的最大时间
           resp.setHeader("Access-Control-Allow-Headers","*");//设置允许携带header
           resp.setHeader("Access-Control-Allow-Credentials","*");//设置允许携带cookie

            resp.setCharacterEncoding("utf-8");
            resp.setContentType("application/json;charset=utf-8");
            PrintWriter out = resp.getWriter();
            out.println(jsonString);
            out.flush();
            out.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

步骤二：前端发送ajax请求

Javascript实现ajax请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="userName"/><label id="tips"></label>
		<button onclick="checkUsername()">检查用户是否可用</button>
	</body>
	
</html>
<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/day0714_ajax/checkName?username="+username;
			ajaxReq.open("GET",url,true);
			
			//3.设置ajax请求的回调函数
			ajaxReq.onreadystatechange = callback;//五种状态，变化4次
			
			//4.发送请求
			ajaxReq.send(null);
			
		}
		
		function callback(){
			if(ajaxReq.readyState==4 && ajaxReq.status==200){
				var str = ajaxReq.responseText;
				console.log(str);
				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";
				}
			}
		}
		
	</script>

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

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

//设置允许跨域
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;
				console.log(str);
				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/day0714_ajax/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/day0714_ajax/checkName";
		$.get(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({
		type:"post",
		url:"http://localhost:8080/day0714_ajax/checkName",
		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(){
			
		}
	});

十一、案例：省市区联动

在这里插入图片描述

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;
//    private  Province province;
	...
}

public class Area {
    private int aid;
    private String aname;
    ...
}

创建帮助类

public class DBUtil {

    private static final String DRIVER = "com.mysql.jdbc.Driver";
    private static final String URL = "jdbc:mysql://localhost:3306/db_pca?useUnicode=true&characterEncoding=utf8&useSSL=false";
    private static final String USERNAME = "root";
    private static final String PASSWORD = "root";
    private static ThreadLocal<Connection> threadLocal = new ThreadLocal<>();
    static{
        try {
            Class.forName(DRIVER);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

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

    public static void close(Connection connection, Statement statement,ResultSet resultSet) throws SQLException {
        if(resultSet!=null){
            resultSet.close();
        }
        if(statement!=null){
            statement.close();
        }
        if (connection!=null){
            connection.close();
        }
    }

}

DAO完成查询操作

package com.ajax.dao;

import com.ajax.entity.Province;
import com.ajax.utils.DBUtil;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class ProvinceDao {
    private Connection conn;
    private PreparedStatement psmt;
    private ResultSet rs;

    public List<Province> listProvince(){
        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 province = new Province(pid, pname);
                pros.add(province);
            }
            return pros;
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            try {
                DBUtil.close(conn,psmt,rs);
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return null;
    }
}

package com.ajax.dao;

import com.ajax.entity.City;
import com.ajax.entity.Province;
import com.ajax.utils.DBUtil;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class CityDao {
    private Connection conn;
    private PreparedStatement psmt;
    private ResultSet rs;

    public List<City> listCityByPid(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);
            }
            return cities;
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            try {
                DBUtil.close(conn,psmt,rs);
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return null;
    }
}

package com.ajax.dao;

import com.ajax.entity.Area;
import com.ajax.entity.City;
import com.ajax.utils.DBUtil;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

public class AreaDao {
    private Connection conn;
    private PreparedStatement psmt;
    private ResultSet rs;

    public List<Area> listCityByPid(int cid){
        List<Area> areas = new ArrayList<>();
        try {
            conn = DBUtil.getConnection();
            String sql = "SELECT * FROM tb_areas where cid = ?";
            psmt = conn.prepareStatement(sql);
            psmt.setInt(1,cid);
            rs = psmt.executeQuery();
            while(rs.next()){
                int aid = rs.getInt("aid");
                String aname = rs.getString("aname");
                Area area = new Area(aid, aname);
                areas.add(area);
            }
            return areas;
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            try {
                DBUtil.close(conn,psmt,rs);
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return null;
    }
}

11.3 完成Service层

创建服务接口

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

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

public interface AreaService {
    public List<Area> listArea(int cid);
}

创建服务实现类

public class ProvinceServiceImpl implements ProvinceService {
    private ProvinceDao provinceDao = new ProvinceDao();
    @Override
    public List<Province> listProvince() {
        return provinceDao.listProvince();
    }
}

public class CityServiceImpl implements CityService {
    private CityDao cityDao = new CityDao();
    @Override
    public List<City> listCity(int pid) {
        return cityDao.listCityByPid(pid);
    }
}

public class AreaServiceImpl implements AreaService {
    private AreaDao areaDao = new AreaDao();
    @Override
    public List<Area> listArea(int cid) {
        return areaDao.listCityByPid(cid);
    }
}

11.4 创建Servlet处理ajax请求

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

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

创建ListProvincesServlet，返回省份信息

@WebServlet("/ListProvinceServlet")
public class ListProvinceServlet extends HttpServlet {
    private ProvinceService provinceService = new ProvinceServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.查询省份信息
        List<Province> provinces = provinceService.listProvince();

        //2.将查询信息封装到vo中
        ResultVo vo = new ResultVo(0,"success",provinces);

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

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

        //5. 将json字符串通过输出流响应给请求者
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json;charset=utf-8");
        PrintWriter out = resp.getWriter();
        out.println(jsonstr);
        out.flush();
        out.close();
    }

创建ListCitiesByPidServlet，返回城市信息

@WebServlet("/ListCityByPidServlet")
public class ListCityByPidServlet extends HttpServlet {
    private CityService cityService= new CityServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String pid1 = req.getParameter("pid");
        int pid = pid1!=null?Integer.parseInt(pid1):1;
        List<City> cities = cityService.listCity(pid);
        ResultVo vo = new ResultVo(0,"success",cities);
        String json = new Gson().toJson(vo);
        //4.跨域
        resp.setHeader("Access-Control-Allow-Origin","*");//设置允许跨域
        resp.setHeader("Access-Control-Allow-Methods","*");//设置允许多种请求方式
        resp.setHeader("Access-Control-Max-Age","3600");//设置跨域缓存的最大时间
        resp.setHeader("Access-Control-Allow-Headers","*");//设置允许携带header
        resp.setHeader("Access-Control-Allow-Credentials","*");//设置允许携带cookie

        //5. 将json字符串通过输出流响应给请求者
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json;charset=utf-8");
        PrintWriter out = resp.getWriter();
        out.println(json);
        out.flush();
        out.close();
    }

创建ListAreaByCidServlet，返回区信息

@WebServlet("/ListAreaByCidServlet")
public class ListAreaByCidServlet extends HttpServlet {
    private AreaService areaService = new AreaServiceImpl();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String cid1 = req.getParameter("cid");
        int cid = cid1!=null?Integer.parseInt(cid1):1;
        List<Area> areas = areaService.listArea(cid);
        ResultVo vo = new ResultVo(0,"success",areas);
        String json = new Gson().toJson(vo);
        //4.跨域
        resp.setHeader("Access-Control-Allow-Origin","*");//设置允许跨域
        resp.setHeader("Access-Control-Allow-Methods","*");//设置允许多种请求方式
        resp.setHeader("Access-Control-Max-Age","3600");//设置跨域缓存的最大时间
        resp.setHeader("Access-Control-Allow-Headers","*");//设置允许携带header
        resp.setHeader("Access-Control-Allow-Credentials","*");//设置允许携带cookie

        //5. 将json字符串通过输出流响应给请求者
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json;charset=utf-8");
        PrintWriter out = resp.getWriter();
        out.println(json);
        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>--请选择--</option>
		</select>
		<select id="city">
			<option>--请选择--</option>
		</select>
		<select id="area">
			<option>--请选择--</option>
		</select>
		
	</body>
	<script type="text/javascript" src="js/jquery-3.5.1.min.js" ></script>
	<script type="text/javascript">
		//页面加载时，显示省份信息
		$(function(){
			$.get("http://localhost:8080/PCA/ListProvinceServlet",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);
					}
				}
			});
			
		});
		//选择省份后，判断省份是否有值，有则循环得到data传id
		$("#province").change(function(){
			var proid = $("#province").val();
			$("#city").html("<option value='0'>--请选择--</option>");
			if(proid != "0"){
				$.post("http://localhost:8080/PCA/ListCityByPidServlet",{pid:proid},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);
					}
				});
			}
		})
		
		//选择城市后，判断城市是否有值，有则传cid得到data
		$("#city").change(function(){
//			var proid = $("#province").val();
			var cityid = $("#city").val();
			$("#area").html("<option value='0'>--请选择--</option>");
			if(cityid !="0"){
				$.post("http://localhost:8080/PCA/ListAreaByCidServlet",{cid:cityid},function(res){
					var arr = res.data;
					for(var i = 0;i<arr.length;i++){
						var optionStr = "<option value='"+arr[i].aid+"'>"+arr[i].aname+"</option>";
						$("#area").append(optionStr);
					}
				});
			}	
		});
	</script>
</html>

十二、jQuery验证插件

jQuery插件，就是基于jQuary函数库扩展的js函数库。

官方插件地址:https://plugins.jquery.com/validation

jQuery验证插件

插件地址：https://plugins.jquery.com/validation

12.2 jQuery验证插件作用

用于表单数据提交前的校验：（长度、格式、一致性）

12.3 jQuery验证插件的使用

在需要进行表单校验的HTML文档中引入jquery和validate函数库

<script type="text/javascript" src="js/jquery-3.5.1.min.js" ></script>
	<script type="text/javascript" src="js/jquery.validate.min.js" ></script>
	<script type="text/javascript">
      </script>

validate库是对表单数据进行校验，先建表单

<form action="" method="post" id="myForm">
			<table style="width:500px;" align="center">
				<caption>用户注册</caption>
				
				<tr>
					<td class="td1">账号:</td>
					<td><input type="text" name="userName"/></td>
				</tr>
				
				<tr>
					<td class="td1">密码:</td>
					<td><input type="text" name="userPwd" id="userPwd"/></td>
					<!--<label class="error"></label>-->
				</tr>
				
				<tr>
					<td class="td1">确认密码:</td>
					<td><input type="text" name="rePwd"/></td>
				</tr>
				
				<tr>
					<td class="td1">邮箱:</td>
					<td><input type="text" name="email"/></td>
				</tr>
				
				<tr>
					<td class="td1">年龄:</td>
					<td><input type="text" name="userAge"/></td>
				</tr>
				
				<tr>
					<td class="td1"></td>
					<td><input type="submit" value="提交注册"/></td>
				</tr>
				
			</table>	
		</form>

表单校验

<script type="text/javascript">
		$("#myForm").validate({
			rules:{
				//如果出现userName.aaa，则用双引号引起来
				userName:{required:true,minlength:6,maxlength:20},
				userPwd:{required:true,minlength:8,maxlength:16},
				rePwd:{required:true,equalTo:"#userPwd"},
				email:{required:true,email:true},
				userAge:{required:true,number:true,min:6,digits:true}
			},
			messages:{
				userName:{required:"请输入账号",minlength:"账户长度至少6个字符",maxlength:"账户长度最多20个字符"},
				userPwd:{required:"请输入密码",minlength:"密码长度至少8个字符",maxlength:"账户长度最多16个字符"}
				
			}
		});
	</script>
 method="post" id="myForm">
			<table style="width:500px;" align="center">
				<caption>用户注册</caption>
				
				<tr>
					<td class="td1">账号:</td>
					<td><input type="text" name="userName"/></td>
				</tr>
				
				<tr>
					<td class="td1">密码:</td>
					<td><input type="text" name="userPwd" id="userPwd"/></td>
					<!--<label class="error"></label>-->
				</tr>
				
				<tr>
					<td class="td1">确认密码:</td>
					<td><input type="text" name="rePwd"/></td>
				</tr>
				
				<tr>
					<td class="td1">邮箱:</td>
					<td><input type="text" name="email"/></td>
				</tr>
				
				<tr>
					<td class="td1">年龄:</td>
					<td><input type="text" name="userAge"/></td>
				</tr>
				
				<tr>
					<td class="td1"></td>
					<td><input type="submit" value="提交注册"/></td>
				</tr>
				
			</table>	
		</form>

表单校验

<script type="text/javascript">
		$("#myForm").validate({
			rules:{
				//如果出现userName.aaa，则用双引号引起来
				userName:{required:true,minlength:6,maxlength:20},
				userPwd:{required:true,minlength:8,maxlength:16},
				rePwd:{required:true,equalTo:"#userPwd"},
				email:{required:true,email:true},
				userAge:{required:true,number:true,min:6,digits:true}
			},
			messages:{
				userName:{required:"请输入账号",minlength:"账户长度至少6个字符",maxlength:"账户长度最多20个字符"},
				userPwd:{required:"请输入密码",minlength:"密码长度至少8个字符",maxlength:"账户长度最多16个字符"}
				
			}
		});
	</script>

NULL_KUN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery

一、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
复制链接

扫一扫