AJAX & jQuery 小结

AJAX

• 概念：异步的 JavaScript 和 XML
• 作用：ajax 就是用来做局部刷新的一种方法
• PS：现在基本不用 xml 这种数据交换格式，都是用 js + json 实现 ajax 异步请求

注意：前端页面发送的请求地址，可以带项目名，也可以不带！

• 原生 js 实现异步请求四步：
  1. 创建异步请求对象
  2. 绑定事件（事件中接收数据并局部刷新展示）
  3. 初始化请求数据
  4. 发送请求

<script type="text/javascript">

    function show() {
        // 1.创建异步对象
        var xmlHttp = new XMLHttpRequest();
        // 2.绑定事件
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                document.getElementById("mspan").innerText = xmlHttp.responseText;
            }
        }
        // 3.初始化请求数据
        var w = document.getElementById("weight").value
        var h = document.getElementById("height").value
        var param = "weight=" + w + "&height=" + h;
        xmlHttp.open("GET", "calBmi22?" + param, true);
        // 4.发送请求
        xmlHttp.send();
    }
</script>

jQuery

• 介绍：jQuery 就是一套 js 库

开篇基础

• html 中引入 jQuery 库文件方式

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

• 类似 window.onload = function() {} 用法

// 以下和 js 中 window.onload = function() {} 作用相同，dom 对象加载成功后执行函数体中内容
// 标准写法
$(document).ready(function() {})
// 可简写
$(function() {})

• dom 对象和 jQuery 对象

// dom 对象：js 语法创建的对象
var domObj = document.getElementById("mBtn");
// jQuery 对象：jQuery 语法创建的对象，要注意 jQuery 对象都是数组，数组中存储着 dom 对象
var $obj = $("#mBtn");

// dom 对象和 jQuery 对象相互转换是为了方便各自函数的调用
// dom 对象转为 jQuery 对象：
$(dom对象)
// jQuery 对象转为 dom 对象：从数组中获取第一个元素就是 dom 对象，就完成了转换
$("mBtn")[0] // 方式一
$("mBtn").get(0) // 方式二

• dom 对象操作 css 样式示例

$("div").css("background","red") // 操作的所有 div

选择器（掌握）

基本选择器

基本选择器作用：定位 dom 对象

// jQuery 中对象的三种基本选择器
$("#mBtn") // id 选择器
$(".class") // class 选择器（也称样式选择器）
$("span")  // 标签选择器

$("*") // 所有选择器
$("#mBtn,.class,span") // 组合选择器

表单选择器

含有 type 属性的组件，才能用表单选择器定位。

// 语法
$(":type类型")
// 举例
$(":text") // 选取所有单行文本框
$(":password") // 选取所有密码框
$(":radio") // 选取所有单选框
$(":checkbox") // 选取所有多选框

过滤器

过滤器作用：对定位的dom对象进行筛选

注意：过滤器需要和选择器联合使用

基本过滤器

// 选择第一个dom对象
$("选择器:first")
// 选择最后一个dom对象
$("选择器:last")
// 选择数组中指定对象
$("选择器:eq(数组索引)")
// 选择数组中小于指定索引的所有dom对象
$("选择器:lt(数组索引)")
// 选择数组中大于指定索引的所有dom对象
$("选择器:gt(数组索引)")

表单属性过滤器

作用：根据表单中dom对象状态进行定位

例如：

启用状态：enabled

不可用状态：disabled

选中状态：checked、selected

// 选择所有可用的文本框
$(":text:enabled")
// 选择所有不可用的文本框
$(":text:disabled")
// 选择复选框中选中的元素
$(":checkbox:checked")
// 获取指定下拉列表中被选中的元素
// 语法：选择器>option:selected
$("#mOption>option:selected")

事件

定义元素监听事件

注意：

监听事件名就是js中事件去掉on的部分。

绑定事件时，一般是需要在页面中dom对象加载成功后再进行。

// 语法
$("选择器").监听事件名(处理函数)
// 例如
$("#mBtn").click(function() {})

on() 绑定事件

event：事件一个或多个，多个之间用空格分开。
function：可选；规定当事件发生时运行的函数。

 // 语法
${"选择器"}.on(event,function)
// 例如
${"#btn"}.on("click", function() {})

函数

val（常用）

操作数组中DOM对象的value属性

// 无参调用，读取数组中第一个DOM对象的value属性值
$("选择器").val()
// 有参调用，对数组中所有DOM对象的value属性进行统一赋值
$("选择器").val(值)

text

// 无参调用，读取数组中所有DOM对象的文字内容，并拼接成一个字符串进行返回
$("选择器").text()
// 有参调用，对数组中所有DOM对象的文字显示内容进行统一赋值
$("选择器").text(值)

attr

对val，text之外的其他属性进行操作

// 获取DOM数组中第一个对象的指定属性值
$("选择器").attr("属性名")
// 对DOM数组中所有对象的指定属性设置新值
$("选择器").attr("属性名","值")

remove

// 将数组中所有DOM对象及其子对象一并删除
$("选择器").remove()

empty

// 将数组中所有DOM对象的子对象删除
$("选择器").empty()

append（常用）

// 为数组中所有DOM对象添加子对象
$("选择器").append("<div>我是动态添加的div</div>")

html

设置或返回被选元素的内容（innerHTML）

// 无参调用，获取数组第一个元素的内容
$("选择器").html()
// 有参调用，设置DOM数组中所有元素的内容
$("选择器").html(值)

each（常用）

对数组，json和dom等的遍历，对每个元素调用一次函数。

index：数组的下标

element：数组的对象

// 语法1
$.each(要遍历的对象,function(index,element){处理程序})
// 语法2
jQuery对象.each(function(index,element){处理程序})

AJAX（重点）

jQuery中使用三个函数实现了ajax请求的处理，封装了原生js实现ajax的四步。

$.ajax()

jquer中实现ajax的核心函数。

// 示例：
$.ajax({
    url: "calBmi22",
    data: {
        "weight": weight,
        "height": height
    },
    dataType: "json",
    success: function (resp) {
        $("#mspan").html(resp)
    }
})

$.get()

get请求做ajax请求；内部调用了$.ajax()

// 语法：
$.get(url,data,function(resp),dataType)

$.post()

post请求做ajax请求；内部调用了$.ajax()

// 语法：
$.post(url,data,function(resp),dataType)

Ajax 实现级联查询练习

参见链接：https://www.bilibili.com/video/BV1Jg4y1B7n4?p=33