Java0基础_day19_Javaweb前后端融合_Ajax替代_Jquery
标签：Jquery库，JS，Ajax
1. Jquery概述
- 什么是Jquery？
Jqurey是JavaScript的库，封装了很多便于使用的函数，以便更好的操作浏览器DOM对象，例如前面学到的JS中的事件绑定、DOM对象定位、JSON格式解析等等前端操作，以及新建XMLHttpReques异步请求对象获取后端数据等操作都可以用Jquery的高级函数更简洁的解决我们的问题。
- 为什么要用Jquery？
因为Jquery更简洁、兼容性好、有出错提示、体积小、免费，用于定位操作DOM对象、处理事件、动画，更重要的是仅需要一个函数即可实现Ajax请求！
- Jquery与JavaScript的关系？
Jquery是基于JavaScript的再次封装的函数，因此在JavaScript中有两种对象，即Jquery对象和纯JavaScript对象，后者又称为DOM对象，其中他们可以相互转换，以便使用各自的方法/属性，其中Jquery对象其本质是DOM对象的数组形式，即[dom对象1，dom对象2，dom对象3]！
2.开发前准备_Jquery的引入
2.1 引入：前面讲到，有些函数是Jquery自带，意味着只有Jquery才能看懂，故必须引入Jquery库，其本质是jquery.js，可以从官网下载，然后放在某个目录，然后写JavaScript时在头部引入：
2.2 对象转换
第一个：从jquery对象到js对象：
var obj = document.getElementById("btn");//返回dom对象数组
var jsobj = obj[0]；
var jsobj = obj[0].get(0);第二个：从js对象到jquery对象：
$(DOM对象)
var jqueryobj = $("#txt1");
jqueryobj.val();【注意】jquery对象才有xx.val()方法，而js对象只有XX.value属性，二者一定要注意区分。
3.Jquery选择器_返回DOM对象
这里将部分代码示例放这里，方便下文的选择器的学习。
我是one的div
我是two的div
我是没哟id和class的div
我是span标签
文本框
单选框
男
女
复选框
抽烟
喝酒
吃饭
下拉框
按钮
我是button
- 是什么？
用于对DOM对象进行定位的条件字符串，类似于CSS选择器。
- 有哪些分类？
第一个：id选择器→语法： $("#id值")→举例：$("#one")
第二个：class选择器→语法：$(".class 样式名")→举例：$(".two")
第三个：标签选择器→语法：$("标签名")→举例：$("div")，$("span")
第四个：组合选择器→语法：$("id选择器，class选择器，标签选择器")
第五个：全部选择器→$("*")
第六个：表单选择器→$(":text")，$(":checkbox")，$(":type值")
【注意】表单选择器针对dom对象的type属性，如果没有type属性则不能使用该方法。
【注意2】$(":tr")不能用，因为tr不是input的type类型
【注意3】用于快速定位如文本框、密码框、复选框、按钮、提交按钮、重置按钮
4.过滤器_选择器_返回DOM对象
首先值得一提的是，过滤器必须依赖于选择器，即先选择然后才能过滤。
第一个：索引过滤器→
第一个：$("选择器:first")
最后一个：$("选择器:last")
下标：$("选择器:eq(数组索引)")
选择小于索引的所有对象：$("选择器:lt(索引)") 2→0,1
选择大于索引的所有对象：$("选择器:gt(索引)") 2→3,4
第二个：表单属性过滤器：根据表单中dom对象的状态情况，定位dom对象
启用状态：enabled →$(":text:enabled")
不可以 disabled→$(":text:disabled")
选择状态 checked→$(":checkbox:checked")
下拉列表→$(":checkbox>option:selected") 父子关系
var selectbox = $("select>option:selected");//select标签下的option子标签的取值； $("#province>option:selected")
5.事件绑定
语法格式1：如下图，将id值为one的所有dom对象的click事件绑定在内部的函数中。
$(选择器).事件名(事件的处理函数)
$("#one").click(function(){
alert(1);
})【注意】这里的事件没有on关键字！
语法格式2：这个和上面差不多，不再赘述
$(选择器).on(事件名，事件的处理函数)
事件名-如click，去掉on6.常用函数_第一组
第一个：val()函数 →操作dom对象的value值属性；读/改
无参调用：$(选择器).val() 获取第一个dom对象的值；
有参调用：$(选择器).val("值") 改变jquery所有对象的值
第二个：text()函数
所有dom对象的文字显示内容属性
$(选择器).text() 读取所有DOM对象的文字显示内容，拼接位一个字符串返回；
$(选择器).text(值) 统一赋值；
第三个：attr()函数
对val，text之外的其他属性赋值
$(选择器).attr("属性名")→获取dom数组第一个对象的属性值
$(选择器).attr("属性名","值")→统一赋值；
7.常用函数_第二组
第一个：remove()函数
用法：$(选择器).remove() 将数组中所有DOm对象及其子对象一起删除
第二个：empty()函数
$(选择器).empty() 将数组中所有DOm对象的子对象删除
第三个：append()函数→为所有的DOM对象添加子对象
常见类型：table、button、select、div都可以；
语法格式：$(选择器).append("
我动态添加的div")var htm = ""; //注意引号嵌套用单引号 $("div:first").append(htm);第四个：html()函数→设置/返回被选中元素的内容，即 innerHTML
$(选择器).html() 获取DOM数组第一个元素内容；
$(选择器).html(值) 统一赋值；
我是jdbc的的的的的jdbc alert($("span").html()); 我是SPAN的的的的的数据库第五个：each()函数→对数组、json数组、dom数组遍历
语法1：$.each(循环的内容，处理函数)
其中，处理函数：
处理函数：function(index,element) index element都是自定义的 index：循环的所有 element：成员
- 普通数组
$.each($(":text"),function(index,element){ print("index"+index+"element is "+element) //这里可以用任意变量名，如index→i； })
- json数组
var json = {"name":"123","id":44}; $.each(json,function(i,n){ alert(i+"'s value is"+n); //这里的i为name、id，n为123、44； })
- dom数组
var obj = $(":text");
$.each(obj,function(i,n){ alert(n.value); //i为下标，n为每个text输入框对象 })
语法2：jquery对象.each(function(index，element){处理程序})→略；
8.Jquery下的Ajax_$.ajax()
在Jquery下实现Ajax异步请求非常方便，用$.ajax(parameters)函数即可，其中函数参数包括请求的url，请求的方式，参数值等，值得一提的是：
即$.ajax()参数是一个json格式的；如：$.ajax({名称：值，名称2：值2})
参数1：async 默认为true，异步；
参数2：contextType：字符串，表示从浏览器发送给浏览器的参数类型，如：
如contextType："application/json"
//在JS中，如果是字符串则必须加引号；
参数3：data
可以是字符串，数组，json
代表请求的参数和参数值；
data：{name：“sdf”，id：“33”}
参数4：dataType：表示期望服务端返回的格式
如json，xml、http和text
当浏览器发送$.ajax()的请求时，服务端servlet知道自己需要发回怎样的的数据；
dataType：“json”
参数5：error：一个function，表示当请求发生错误时，需要执行的函数；
举例：error:function(){
}
参数6：success
//一个函数，请求成功了，服务器返回的数据会执行该函数
//等价于之前的判断条件：readystate=4并且status=200
//例如：success:function(data){
//data就是responseTest
//这里的responseTest是jquery处理后的结果
}
参数7：url
如url：“bmiAjax”
参数8：type：请求方式
get或者post
不区分大小写
type：“get”
默认是get；
结论：主要使用：url，data，dataType，success四个参数。
除此之外，还有两个更为简便的get和post请求函数可以封装Ajax请求：
第二个：$.post();
采用post方式做ajax请求
本质：还是调用的$.ajax();
语法：$.post(url，data，function（resp)，dataType)//URL是必须的
第三个：$.get();
采用get方式做ajax请求
本质：还是调用的$.ajax();
语法：$.get(url，data，function（resp)，dataType)//URL是必须的
【注意】在$.ajax()函数中，其中的参数顺序没有规定，而get和post必须是按照图上的参数顺序进行传入！
9.Jquery实现级联查询
需求描述：现在有省和对应城市的mysql表，需要点击按钮实现省份下拉框加载进已有的省，然后根据省去查询城市，反应在城市表中。
效果：
原材料：省份sql脚本
链接: https://pan.baidu.com/s/1muxgVDd3_h4e4iWK-3yQkA 提取码: 1cus 复制这段内容后打开百度网盘手机App，操作更方便哦
思路：前端通过JS→jquery发送Ajax请求、后端用Tomcat和HttpServlet，利用jdbc从数据库中查询返回json格式数据→前端处理得到的结果
代码：
//1.CT.java
public class CT {
private String provinceID;
private String cityName;
public CT(String provinceID, String cityName) {
this.provinceID = provinceID;
this.cityName = cityName;
}
}
//2.peovinc.java
public class peovinc {
private int id;
private String name;
public peovinc(int id, String name) {
this.id = id;
this.name = name;
}
}
//3.web.xml
G
comAI.houtai
G
/ceshi
GG
comAI.city
GG
/CITY
//4.index.jsp
<%--
Created by IntelliJ IDEA.
User: saberQueen
Date: 2021/11/29
Time: 18:39
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
ajax_级联查询
省市级联查询
//5.省后台处理程序
package comAI;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
/**
* @author zhangsan
* @create 2021-11-29 18:39
*/
public class houtai extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// response.setContentType("application/json;charset=uft-8");
response.setContentType("application/json;charset=utf-8");
// System.out.println("111111111111");
List list = new ArrayList<>();
//URL样式；/sf/id=3 →返回省份下拉列表；
Connection col = null;
PreparedStatement ps = null; //变为预编译的Statemnet对象
ResultSet rs = null;
try {
Class.forName("com.mysql.cj.jdbc.Driver");
col = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb","root","123456");
String sql = "select id,name from province; ";
ps = col.prepareStatement(sql);
// ps.setString(1, request.getParameter("number"));
rs = ps.executeQuery();
peovinc pro;
String jsonFromJava="{}";//定义在这里是为了保证能够传送回去一个json格式的对象；
PrintWriter pw = response.getWriter();
while(rs.next()){
int id = Integer.valueOf(rs.getString("id"));
String name = rs.getString("name");
// String jiancheng = rs.getString("jiancheng");
// String shenghui = rs.getString("shenghui");
pro = new peovinc(id,name);
list.add(pro);
}
//转换为json对象；
ObjectMapper om = new ObjectMapper();
jsonFromJava = om.writeValueAsString(list);
//{"id":1,"name":"河北"}{"id":2,"name":"山西"}{"id":3,"name":"内蒙古"}{"id":4,"name":"辽宁"}{"id":5,"name":"江苏"}{"id":6,"name":"浙江"}{"id":7,"name":"安徽"}{"id":8,"name":"福建"}{"id":9,"name":"江西"}
// System.out.println("转换后的结果是" + jsonFromJava);
pw.print(jsonFromJava);//传输回去字符串；
System.out.println(jsonFromJava);
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
catch(SQLException e ){
e.printStackTrace();
}finally {
if (rs!=null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(ps!=null){
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (col !=null) {
try {
col.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
}
//6.城市后台程序
package comAI;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;
/**
* @author zhangsan
* @create 2021-11-29 20:40
*/
public class city extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//根据id查城市，返回//URL样式；/sf/id=3 →返回省份下拉列表；
response.setContentType("application/json;charset=utf-8");
String ID = request.getParameter("id");
System.out.println(ID);
List list = new ArrayList<>();
Connection col = null;
PreparedStatement ps = null; //变为预编译的Statemnet对象
ResultSet rs = null;
// CT pro = null;
try {
CT pro = null;
Class.forName("com.mysql.cj.jdbc.Driver");
col = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb","root","123456");
String sql = "select name from city where provinceid = ? ";
ps = col.prepareStatement(sql);
ps.setString(1, ID);
rs = ps.executeQuery();
String jsonFromJava="{}";//定义在这里是为了保证能够传送回去一个json格式的对象；
PrintWriter pw = response.getWriter();
while(rs.next()){
// int id = Integer.valueOf(rs.getString("id"));
String name = rs.getString(1);
// String jiancheng = rs.getString("jiancheng");
// String shenghui = rs.getString("shenghui");
pro = new CT(ID,name);
list.add(pro);
}
//转换为json对象；
ObjectMapper om = new ObjectMapper();
jsonFromJava = om.writeValueAsString(list);
//{"id":1,"name":"河北"}{"id":2,"name":"山西"}{"id":3,"name":"内蒙古"}{"id":4,"name":"辽宁"}{"id":5,"name":"江苏"}{"id":6,"name":"浙江"}{"id":7,"name":"安徽"}{"id":8,"name":"福建"}{"id":9,"name":"江西"}
// System.out.println("转换后的结果是" + jsonFromJava);
pw.print(jsonFromJava);//传输回去字符串；
System.out.println(jsonFromJava);
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
catch(SQLException e ){
e.printStackTrace();
}finally {
if (rs!=null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if(ps!=null){
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (col !=null) {
try {
col.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
}
【注意】除此外，本次实验还额外加了几个库，如下图，具体文件和源代码至github：
GitHub - Zhujie-ww/jquery_searchContribute to Zhujie-ww/jquery_search development by creating an account on GitHub.
https://github.com/Zhujie-ww/jquery_search
