js学习之路（十二）
1. jQuery 的事件函数
/*
jQuery 的事件函数
+ jQuery 给我们提供了一些简洁的绑定事件的方式
+ 把一些常用事件直接封装成了函数
click()
mouseover()
+ 这些方法可以直接使用, 带有隐式迭代
=> 快捷绑定事件
=> 语法:
1. 元素集合.事件类型(事件处理函数)
2. 元素集合.事件类型(传入事件处理函数的参数, 事件处理函数)
jquery 唯一的特殊事件
+ hover()
+ 一个结合了移入移出的事件
+ 语法: 元素集合.hover(移入的事件处理函数, 移出的事件处理函数)
-> 如果你只传递一个参数, 那么移入移出都触发
*/
// 1. 绑定点击事件
// $('div').on('click', function () { console.log('点击事件触发') })
// // 使用事件函数
// $('div').click({ name: 'Jack' }, function (e) { console.log('点击事件', e) })
// $('div').click(function (e) { console.log('点击事件', e) })
// 2. 特殊事件 hover
// $('div').hover(
// function () { console.log('移入') },
// function () { console.log('移出') }
// )
2.jQuery 的节点操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
background-color: skyblue;
}
p {
background-color: orange;
}
</style>
</head>
<body>
<div class="a">
hello
<p class="b">我是 div 里面的 p 标签</p>
world
</div>
<hr>
<script src="./jquery/jquery.min.js"></script>
<script>
/*
jQuery 的节点操作
+ 原生 JS 的节点操作
=> 创建节点, 插入节点, 删除节点, 替换节点, 克隆节点
+ jQuery 的节点操作
=> 创建节点, 插入节点, 删除节点, 替换节点, 克隆节点
1. 创建节点
+ $(html结构字符串)
=> 当 $() 里面传递一个选择器的时候, 就是获取元素
=> 当 $() 里面传递一个 html 结构字符串的时候, 就是创建元素节点
=> 当 $() 里面传递一个 DOM 元素节点的时候, 就是转换成 jQuery 元素结合
2. 插入节点
+ 内部插入(父子关系的插入)
2-1. append()
=> 语法: 父元素.append(子元素)
=> 把子元素插入到父元素内部, 放在末尾的位置
2-2. appendTo()
=> 语法: 子元素.appendTo(父元素)
=> 把子元素插入到父元素内部, 放在末尾的位置
2-3. prepend()
=> 语法: 父元素.prepend(子元素)
=> 把子元素插入到父元素内容, 放在最前面的位置
2-4. prependTo()
=> 语法: 子元素.prependTo(父元素)
=> 把子元素插入到父元素内容, 放在最前面的位置
+ 外部插入(兄弟关系的插入)
2-5. after()
=> 语法: 存在元素.after(插入元素)
=> 把插入元素排在存在元素的后面, 以兄弟关系出现
2-6. insertAfter()
=> 语法: 插入元素.insertAfter(存在元素)
=> 把插入元素排在存在元素的后面, 以兄弟关系出现
2-7. before()
=> 语法: 存在元素.before(插入元素)
=> 把插入元素排在存在元素的前面, 以兄弟关系出现
2-8. insertBefore()
=> 语法: 插入元素.insertBefore(存在元素)
=> 把插入元素排在存在元素的前面, 以兄弟关系出现
3. 删除节点
3-1. remove()
=> 语法: 元素集合.remove()
=> 把自己从自己的父元素里面移出
3-2. empty()
=> 语法: 元素集合.empty()
=> 把自己变成空标签, 把所有后代节点全部移除
4. 替换节点
4-1. replaceWith()
=> 语法: 换下节点.replaceWith(换上节点)
4-2. replaceAll()
=> 语法: 换上节点.replaceAll(换下节点)
5. 克隆节点
5-1. clone()
=> 语法: 元素集合.clone()
=> 必然携带所有节点过来
=> 第一个参数默认是 false, 表示是否克隆元素本身的事件, 选填 true
=> 第二个参数默认是 跟随第一个, 表示是否克隆元素后代节点的事件, 选填
=> 注意: 当第一个参数是 false 的时候, 第二个参数没有意义
*/
// 0. 准备一个节点
// const p = $('<p>我是 jQuery 创建的 p 元素节点</p>')
// 1. 创建节点
// const div = $('<div>我是一个创建的 div</div>')
// console.log(div)
// 2. 插入节点
// 2-1. append()
// $('div').append(p)
// 2-2. appendTo()
// p.appendTo($('div'))
// 2-3. prepend()
// $('div').prepend(p)
// 2-4. prependTo()
// p.prependTo($('div'))
// 分析: p 是一个 jQuery 创建的元素节点, 但是是一个复杂数据类型的变量
// 存储的是一个 地址, 只要我使用 p, 就是在使用堆里面得哪个空间
// $('div').append(p)
// $('div').prepend(p)
// 上面一个下面一个 10
// 上面一个下面没有 3
// 上面没有下面一个 1
// 2-5. after()
// $('div').after(p)
// 2-6. insertAfter()
// p.insertAfter($('div'))
// 2-7. before()
// $('div').before(p)
// 2-8. insertBefore()
// p.insertBefore($('div'))
// 3. 移除节点
// 3-1. remove()
// $('div').remove()
// 3-2. empty()
// $('div').empty()
// 4. 替换节点
// 4-1. replaceWith()
// $('div > p').replaceWith(p)
// 4-2. replaceAll()
// p.replaceAll($('div > p'))
// 5. 克隆节点
$('.a').click(function () { console.log('div') })
$('.b').click(function () { console.log('p') })
// 5-1. clone()
$('div').clone(false, true).insertAfter($('hr'))
</script>
</body>
</html>
3.jQuery 操作元素属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="abc" id="box" hello="world" data-index="10">你好 世界</div>
<input type="checkbox">
<input type="button" value="按钮">
<script src="./jquery/jquery.min.js"></script>
<script>
/*
jQuery 操作元素属性
+ 几种属性操作
=> 原生属性, id class src ...
=> 自定义属性, getAttribute() ...
=> H5 自定义属性, dataset data-xxx
+ jQuery 有三种操作属性的方法
=> attr() 和 removeAttr()
=> prop() 和 removeProp()
=> data() 和 removeData()
1. attr() 和 removeAttr()
1-1. attr()
=> 语法: 元素集合.attr(属性名)
-> 获取元素的该属性, 主要用来获取标签属性, 包括一些自定义属性
=> 语法: 元素集合.attr(属性名, 属性值)
-> 设置元素的标签属性, 只是把属性设置在标签上, 当作一个自定义属性使用
-> 对于原生属性有些有用, 有些没有用
=> 注意:
-> 设置的时候, 需要两个参数
-> 设置的不管是什么数据类型, 都会变成字符串类型
-> 有的原生属性好使, 有的不好使
1-2. removeAttr()
=> 语法: 元素集合.removeAttr(属性名)
-> 删除元素身上的自定义属性
-> id class 等属性也可以删除
=> 注意:
-> 多用于删除 attr 方法设置的属性
2. prop() 和 removeProp()
2-1. prop()
=> 语法: 元素集合.prop(属性名)
-> 获取元素的原生属性, 也可以获取元素的自定义属性
-> 但是 attr 方法设置的自定义属性他获取不到
=> 语法: 元素集合.prop(属性名, 属性值)
-> 主要设置元素的原生属性, 也可以设置自定义属性
-> 他设置的自定义属性不会显示在标签上, 而是存储在元素身上
=> 注意:
-> 设置的自定义属性不会显示在标签上
-> 你设置的时候是什么数据类型, 获取到的时候还是什么数据类型
-> attr 设置的自定义属性他拿不到
2-2. removeProp()
=> 语法: 元素集合.removeProp(属性名)
-> 删除元素的属性, 但是只能删除由 prop 设置的自定义属性
-> 原生属性 id class ... 不能删除
3. data() 和 removeData()
3-1. data()
=> 语法: 元素集合.data(属性名)
-> 获取使用 data() 方法存储的数据, 获取元素身上 data-xxx 的属性
=> 语法: 元素集合.data(属性名, 属性值)
-> 设置的时候, 只是把数据存储在元素身上的某一个对象空间内
-> 但是不会出现在标签上, 不会由 data-xxx 的属性出现
=> 注意:
-> 可以获取元素标签上 data-xxx 的属性
-> 但是不能设置标签上 data-xxx 的属性
3-2. removeData()
-> 只能删除由 data() 方法设置的属性
-> 不能删除元素身上 data-xxx 的属性
*/
// 1. attr() 和 removeAttr()
// 1-1. attr() 获取
// console.log($('div').attr('class'))
// console.log($('div').attr('id'))
// console.log($('div').attr('hello'))
// 1-2. attr() 设置
// $('div').attr('a', '你好 世界')
// $('div').attr('id', '你好 世界')
// $('div').attr('a', 100)
// console.log($('div').attr('a'))
// 1-3. removeAttr()
// $('div').removeAttr('class')
// $('div').removeAttr('id')
// $('div').removeAttr('hello')
// 2. prop() 和 removeProp()
// 2-1. prop()
// $('div').prop('id', 'abcdefg')
// // 使用 prop 设置了一个自定义属性
// $('div').prop('abc', 100)
// $('div').prop('aa', 200)
// console.log(typeof $('div').prop('abc'))
// // attr 设置的他拿不到
// $('div').attr('bcd', 'hello')
// console.log($('div').prop('bcd'))
// 2-2. removeProp()
// $('div').removeProp('abc')
// $('div').removeProp('id')
// console.dir($('div'))
// 3. data() 和 removeData()
// 3-1. data() 获取
console.log($('div').data('index'))
// 3-2. data() 设置
$('div').data('abcde', 200)
// 3-3. removeData()
$('div').removeData('index')
$('div').removeData('abcde')
console.log($('div'))
</script>
</body>
</html>
4. jQuery 获取元素尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
padding: 20px;
border: 20px solid #333;
margin: 20px;
}
</style>
</head>
<body>
<div></div>
<script src="./jquery/jquery.min.js"></script>
<script>
/*
jQuery 获取元素尺寸
+ 获取元素尺寸有三套方法四种使用方式
+ 不管在页面是不是占位, 这些方法都是获取元素的尺寸
1. width() 和 height()
=> 语法: 元素集合.width() 或者 元素集合.height()
=> 获取的是元素内容位置的尺寸
2. innerWidth() 和 innerHeight()
=> 语法: 元素集合.innerWidth() 或者 元素集合.innerHeight()
=> 获取的是元素 内容 + padding 区域的尺寸
3. outerWidth() 和 outerHeight()
=> 语法: 元素集合.outerWidth() 或者 元素集合.outerHeight()
=> 获取的是元素 内容 + padding + border 区域的尺寸
4. outerWidth(true) 和 outerHeight(true)
=> 语法: 元素集合.outerWidth(true) 或者 元素集合.outerHeight(true)
=> 获取的是元素 内容 + padding + border + margin 区域的尺寸
*/
console.log('width: ', $('div').width())
console.log('height: ', $('div').height())
console.log('innerWidth: ', $('div').innerWidth())
console.log('innerHeight: ', $('div').innerHeight())
console.log('outerWidth: ', $('div').outerWidth())
console.log('outerHeight: ', $('div').outerHeight())
console.log('outerWidth(true): ', $('div').outerWidth(true))
console.log('outerHeight(true): ', $('div').outerHeight(true))
</script>
</body>
</html>
5. jQuery 操作元素位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 2000px;
height: 2000px;
}
div {
width: 300px;
height: 300px;
background-color: skyblue;
/* margin: 60px; */
/* overflow: hidden; */
border: 1px solid #333;
position: absolute;
left: 200px;
top: 200px;
}
p {
width: 100px;
height: 100px;
background-color: orange;
/* margin: 30px; */
position: absolute;
bottom: 10px;
right: 10px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
<script src="./jquery/jquery.min.js"></script>
<script>
/*
jQuery 操作元素位置
+ 操作元素相对于某一个点的位置关系
1. offset()
+ 是一个读写的方法
+ 读取
=> 语法: 元素集合.offset()
=> 返回值: 一个对象, 里面包含一个 x 信息一个 y 信息
=> 相对谁: 相对页面左上角的绝对坐标
=> 注意: 读取出来是一个对象, 你需要值得时候, 要继续 .
不能继续链式编程
+ 设置
=> 语法: 元素集合.offset({ top: xxx, left: xxx })
=> 设置的: 设置的是相对于页面左上角的绝对位置
=> 例子: $('div').offset({ top: 30, left: 30 })
-> 一定会把这个 div 放在距离页面左上角 30 30 的位置
=> 注意: 你设置的时候, 如果父子元素都要动
考虑先后顺序
2. position()
+ 是一个只读的方法
+ 读取:
=> 语法: 元素集合.position()
=> 返回值: 一个对象, 里面包含一个 x 信息一个 y 信息
=> 就是元素的定位关系
=> 如果你定位的是 right 和 bottom, 那么会自动计算成 left 和 top
*/
// 1. offset 获取
// console.log('offset: ', $('div').offset().top)
// console.log('offset: ', $('div').offset().left)
// 2. offset 设置
// $('div').offset({ top: 30, left: 30 })
// $('p').offset({ top: 120, left: 120 })
// $('div').offset({ top: 100, left: 100 })
// 3. position()
console.log($('div').position())
console.log($('p').position())
$('p').position()
</script>
</body>
</html>
6. jQuery 里面有三个基础动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<button class="show">显示</button>
<button class="hide">隐藏</button>
<button class="toggle">切换</button>
<div></div>
<script src="./jquery/jquery.min.js"></script>
<script>
/*
jQuery 里面有三个基础动画
1. show()
+ 显示
2. hide()
+ 隐藏
3. toggle()
+ 切换, 本身显示就隐藏, 本身隐藏就显示
+ 上面三个方法操作的 display: none 和 block
+ 三个的语法是一样的
=> 方法名(运动时间, 运动曲线, 回调函数)
=> 运动时间: 多长时间运动结束
=> 运动曲线: 什么方式运动
=> 回调函数: 运动结束后触发
*/
$('.show').click(() => {
$('div').show(1000, 'linear', () => console.log('显示结束'))
})
$('.hide').click(() => {
$('div').hide(1000, 'linear', () => console.log('隐藏结束'))
})
$('.toggle').click(() => {
$('div').toggle(1000, 'linear', () => console.log('切换结束'))
})
</script>
</body>
</html>
7. jQuery 的折叠动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div.outer {
width: 300px;
height: 300px;
overflow: hidden;
position: relative;
}
div.inner {
width: 300px;
height: 300px;
background-color: skyblue;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<!-- <button class="show">显示</button>
<button class="hide">隐藏</button>
<button class="toggle">切换</button>
<div></div> -->
<button class="show">显示</button>
<button class="hide">隐藏</button>
<button class="toggle">切换</button>
<div class="outer">
<div class="inner"></div>
</div>
<script src="./jquery/jquery.min.js"></script>
<script>
/*
jQuery 的折叠动画
+ jQuery 提供了三种折叠动画
1. slideDown()
+ 下拉显示
2. slideUp()
+ 上拉隐藏
3. slideToggle()
+ 切换显示和隐藏
三个方法都是一样的参数
=> 方法名(时间, 运动曲线, 回调函数)
*/
$('.show').click(() => {
$('.inner').slideDown(1000, 'linear', () => console.log('显示结束'))
})
$('.hide').click(() => {
$('.inner').slideUp(1000, 'linear', () => console.log('隐藏结束'))
})
$('.toggle').click(() => {
$('.inner').slideToggle(1000, 'linear', () => console.log('切换结束'))
})
</script>
</body>
</html>
8. jQuery 的渐隐渐显动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<button class="show">显示</button>
<button class="hide">隐藏</button>
<button class="toggle">切换</button>
<button class="to">指定透明度</button>
<div></div>
<script src="./jquery/jquery.min.js"></script>
<script>
/*
jQuery 的渐隐渐显动画
+ 通过操作 元素的 opacity 达到效果
1. faseIn()
+ opacity 0 ~ 1
2. fadeOut()
+ opacity 1 ~ 0
3. fadeToggle()
+ 切换
以上三个方法的语法是一样的
+ 方法名(时间, 运动曲线, 回调函数)
4. fadeTo()
+ 运动到指定透明度
+ 语法: fadeTo(时间, 指定透明度, 运动曲线, 回调函数)
*/
$('.show').click(() => {
$('div').fadeIn(2000, 'linear', () => console.log('显示结束'))
})
$('.hide').click(() => {
$('div').fadeOut(2000, 'linear', () => console.log('隐藏结束'))
})
$('.toggle').click(() => {
$('div').fadeToggle(2000, 'linear', () => console.log('切换结束'))
})
$('.to').click(() => {
$('div').fadeTo(1000, 0.5, 'linear', () => console.log('运动结束'))
})
</script>
</body>
</html>
9. jQuery 的综合动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
}
</style>
</head>
<body>
<button>开始</button>
<div></div>
<script src="./jquery/jquery.min.js"></script>
<script>
/*
jQuery 的综合动画
+ 可以按照你的设定去进行运动
1. animate()
=> 语法: animate({}, 时间, 运动曲线, 回调函数)
=> {}: 书写你要运动的属性
=> 注意:
-> 颜色相关的属性, 运动不了
-> CSS3 的 2d 和 3d 动画效果运动不了
*/
$('button').click(() => {
$('div').animate({
width: 300,
height: '400px',
borderRadius: '50%',
left: 150,
top: 200,
backgroundColor: 'red'
}, 1000, 'linear', () => console.log('运动结束'))
})
</script>
</body>
</html>
10.jQuery 的停止动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<button class="start">开始</button>
<button class="stop">停止</button>
<button class="finish">完成</button>
<div></div>
<script src="./jquery/jquery.min.js"></script>
<script>
/*
jQuery 的停止动画
+ 因为当你给一个元素设置动画以后
+ 如果快速触发, 会停不下来, 直到你所有的触发都执行完毕为止
+ jquery 给我们提供两个临时停下动画的方法
1. stop()
+ 语法: 元素集合.stop()
+ 当代码执行到这句的时候, 不管运动到什么程度, 立刻停下来
+ 运动到什么位置就停止在什么位置
2. finish()
+ 语法: 元素集合.finish()
+ 当代码执行到这句的时候, 不管运动到什么程度, 直接去到运动结束位置
+ 直接完成本次动画
*/
$('button.start').click(() => {
// 让 div 之前的动画停止在原地, 按照最新的动画进行执行
$('div').stop().slideToggle(1000, 'linear')
})
$('.stop').click(() => {
$('div').stop()
})
$('.finish').click(() => {
$('div').finish()
})
</script>
</body>
</html>
11.jQuery 发送一个 get 请求
/*
jQuery 发送一个 get 请求
+ jQuery 提供了一个函数, 叫做 $.get()
+ 引入 jQuery 以后, 回提供两个变量
1. $
2. jQuery
=> 这两个都是函数数据类型
+ 把这个函数当作一个对象, 向他的身上添加了一些成员
=> 我们管这种方法叫做 jQuery 的全局方法
=> 不需要依赖选择器, 不需要元素集合
=> 直接调用就行
专门用来发送 get 请求
+ 语法: $.get(地址, 传递给后端的数据, 回调函数, 期望返回的数据类型)
=> 地址: 请求地址 (你可以自主拼接参数, 不推荐)
=> 数据: 给后端的数据, 可以写 'key=value&key=value', 可以写 { ... }
=> 回调: 请求成功的回调, 请求成功以后会触发
=> 期望返回的数据类型: 是不是执行解析响应体的操作
-> 'string' 不解析
-> 'json' 会执行一步 JSON.parse()
*/
$.get('./server/get.php?a=100&b=200', function (res) {
// res 就是后端返回的响应体
// 如果你的最后一个参数写了 'json', 会自动执行 JSON.parse()
console.log(res)
}, 'json')
$.get('./server/get.php', 'c=300&d=400', function (res) {
// res 就是后端返回的响应体
// 如果你的最后一个参数写了 'json', 会自动执行 JSON.parse()
console.log(res)
}, 'json')
$.get('./server/get.php', { e: 500, f: 600 }, function (res) {
// res 就是后端返回的响应体
// 如果你的最后一个参数写了 'json', 会自动执行 JSON.parse()
console.log(res)
}, 'json')
13.jQuery 发送一个 post 请求
/*
jQuery 发送一个 post 请求
+ jQuery 提供了一个全局方法叫做 $.post()
+ 专门用来发送 post 请求
发送 post 请求
=> 语法: $.post(地址, 携带给后端的数据, 回调函数, 期望后端返回的数据类型)
=> 四个参数的意义和 $.get() 一模一样
*/
$.post('./server/post.php', 'a=1000&b=2000', (res) => {
console.log(res)
}, 'json')
$.post('./server/post.php', { c: 3000, d: 4000 }, (res) => {
console.log(res)
}, 'json')
14. jQuery 发送 ajax 请求的综合方法
/*
jQuery 发送 ajax 请求的综合方法
+ 可以由你来配置, 决定发送 get 还是 post 请求
+ 叫做 $.ajax()
=> 我们所有的请求都可以使用他来发送
使用
=> 语法: $.ajax(options)
=> options: 就是本次请求的配置信息, 是一个对象数据类型
配置信息里面可以填写的内容
1. url: 请求地址, 必填
2. async: 是否异步, 默认是异步(true), 可以选填非异步(false)
3. type / method: 表示请求方式, 默认是 GET, 可以选填其他请求方式
-> 大小写无所谓
4. data: 传递给后端的参数
-> 可以是查询字符串的形式
-> 可以是对象的形式
5. dataType: 期望后端返回的数据类型, 是否进行 JSON.parse() 解析
6. success: 接收一个函数数据类型, 表示成功的回调
7. error: 接收一个函数数据类型, 表示失败的回调
-> 不光是请求失败会走失败的回调
-> 当你解析失败的时候, 会走失败的回调
8. timeout: 设置一个超时时间
-> 从发送请求开始计时, 到达超时时间还没有接收到响应
-> 会直接取消本次请求, 到失败的回调函数
9. cache: 是否缓存
-> 对于 ajax 请求默认缓存的(true), 可以选填(false)
-> 如果你选择缓存, 那么不会有最后一个时间戳参数
-> 如果你选择不缓存, 那么 jQuery 会在本次请求的末尾添加一个时间戳作为参数
-> 对于 jsonp 请求默认不缓存(false), 可以选填(true)
-> 当你发送 jsonp 请求的时候, 会默认带有一个时间戳参数
10. context: 上下文
-> 指定回调函数的 this 指向
-> jQuery 默认回调函数的 this 指向 jQuery 封装的 xhr 对象
-> context 传递的是谁, 回调函数的 this 就指向谁
缓存:
=> GET 请求会自主缓存, 为什么会缓存 ?
=> 因为你两次发送同一个请求, 浏览器就有可能会缓存下来
-> 怎么证明两次是一个请求
-> 请求地址一模一样, 就表示是同一个请求
=> 不想你进行缓存
-> 让每一次的请求地址不一样
-> 每次请求的时候, 再最后携带一个没有用的参数, 值设置成时间戳
-> 每次请求的地址就不一样
*/
const obj = {
name: '我是 obj 对象'
}
// 发送请求的时候
$.ajax({
url: './server/get.php',
// type: 'GET', // 本次请求以 GET 方式请求
// type: 'POST', // 本次请求以 POST 方式请求
method: 'GET', // 本次请求以 POST 方式请求
async: true,
// data: 'a=100&b=200',
data: { a:100, b:200 },
dataType: 'json', // 对响应体执行 JSON.parse() 操作
// 成功的回调函数
success (res) {
// res 就是响应体, 会根据 dataType 填写的内容来解析
console.log(res)
console.log(this)
},
error (xhr, info, err) {
// xhr 是 jQuery 封装的 ajax 对象
// info 是本次失败的错误信息
// err 错误的详细信息, 但是不是很详细(有的错误方式详细, 有的错误方式不详细)
console.log('本次请求失败了')
console.log(xhr)
console.log(info)
console.log(err)
},
// timeout: 1000, // 1s 没有接收到响应就会取消本次请求
// cache: false,
context: obj
})
15. jQuery 发送 ajax 请求
/*
jQuery 发送 ajax 请求
+ jQuery 对于 ajax 的封装
+ 除了回调函数的形式接收结果
+ 还封装了 promise 的形式接收结果
+ 一个 $.ajax() 方法
=> 你可以选择书写回调函数的形式
=> 也可以选择 promise 的形式
+ 注意: 选择一种方式使用, 不要都是用
*/
// $.ajax({
// url: './server/post.php',
// data: { a: 100, b: 200 },
// type: 'POST',
// dataType: 'json',
// success (res) {
// console.log(res)
// }
// })
// 直接以 promise 的形式接收响应
// $.ajax({
// url: './server/post.php',
// data: { a: 100, b: 200 },
// type: 'POST',
// dataType: 'json'
// }).then(res => {
// console.log(res)
// })
// 回调函数和 promise 的形式都写上
// $.ajax({
// url: './server/post.php',
// data: { a: 100, b: 200 },
// type: 'POST',
// dataType: 'json',
// success (res) {
// console.log('success')
// console.log(res)
// }
// }).then(res => {
// console.log('promise')
// console.log(res)
// })
2580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
