- 8 jQuery中的ajax
- 8.1 $.ajax()
- $.ajax():发送Ajax请求。
- serialize()方法:将表单内容序列化为字符串。(解决表单提交过程中参数拼接的问题)
- serializeArray():序列化表单元素,返回 JSON 数据结构数据。
- 发送jsonp请求
- 8.2 $.get()$.post()
- 8.3 Todo案例
- 8.4 全局事件
- 8.4 nprogress进度条插件
- 8.1 $.ajax()
- 9 RESTful 和 XML
- 实践知识点
8 jQuery中的ajax
8.1 $.ajax()
$.ajax():发送Ajax请求。
- data:发送到服务器的数据,发送的方式有
- 对象:data: { name: ‘zhangsan’, age: ‘20’ }
- 字符串:data: ‘name=zhangsan&age=20’
- type:请求发送的方式(get/post)
- contentType:设置内容类型
- 默认类型: ‘application/x-www-form-urlencoded’
- json类型:contentType: ‘application/json’,
- post请求:当内容类型为json在发送之前需要先将其转化为json字符串对象JSON.stringify({name:’123’})
- get请求则不用转化为json格式会自动进行拼接
- url:发送的请求地址
- beforeSend:是一个请求发送之前的函数
- success:请求执行成功调用函数
- error:请求执行失败执行的函数
- complete:当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。
1
2
3
4
5
6
7
8
9
10
11$.ajax({
type: 'get',
url: 'http://www.example.com',
data: { name: 'zhangsan', age: '20' },
contentType: 'application/x-www-form-urlencoded',
beforeSend: function () {
return false
},
success: function (response) {},
error: function (xhr) {}
}); - return false在函数中执行会阻止程序向下执行
serialize()方法:将表单内容序列化为字符串。(解决表单提交过程中参数拼接的问题)
1
2var params = $('#form').serialize();
// name=zhangsan&age=30serializeArray():序列化表单元素,返回 JSON 数据结构数据。
- 返回的是一个伪数组,通过方法封装返回一个对象serializeObject(obj)
- 代码执行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19$('#form').on('submit', function () {
// 将表单内容拼接成字符串类型的参数
// var params = $('#form').serialize();
// console.log(params)//username=123&password=123
serializeObject($(this))
return false;
})
// 封装将表单中用户输入的内容转化为对象类型
function serializeObject(obj) {
// 处理结果对象
var result = {};
// 返回的是伪数组
var params = obj.serializeArray();
$.each(params, (index, value) => {
result[value.name] = value.value
})
return result;
}
</script> - 执行结果
发送jsonp请求
- 通过设置dataType为jsonp来标识
- jsonp:指定callback参数名称
- jsonCallback:指定函数名称
1
2
3
4
5
6
7
8
9
10$.ajax({
url: 'http://www.example.com',
// 指定当前发送jsonp请求
dataType: 'jsonp',
// 修改callback参数名称
jsonp: 'cb',
// 指定函数名称
jsonCallback: 'fnName',
success: function (response) {}
}) - 注意:
- 服务器端的res.jsonp()在不设置callback参数名称和指定函数名称时,默认是callback函数,可以直接使用res.jsonp()返回属猪
- 添加了jsonp属性时修改了传递过来的参数名称,此时已经不是默认的callback参数名称,服务器端就不能直接使用res.jsonp({})来返回数据
- 修改success函数,正常情况下默认调用success函数,如果不调用则直接在全局重新声明一个函数,注意这里要和jsonpCallback中的函数名称值相同
- 代码实现
- 客户端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18// 自定义函数,注意这里要和jsonpCallback中的函数名称值相同
function fnName(data) {
console.log(data);
}
// 通过ajax发送jsonp请求
$('#btn').on('click', function () {
// 发送jsonp请求,jsonp只能发送get请求
$.ajax({
type: 'get',
url: '/jsonp',
dataType: 'jsonp',
jsonp: 'cb',
jsonpCallback: 'fnName',
// success: function (data) {
// console.log(data);
// }
})
}) - 服务器端
1
2
3
4
5
6
7// jsonp请求,只能是get请求,通过src发送的请求
app.get('/jsonp', (req, res) => {
const cb = req.query.cb
const data = cb + "({name: 'zhaoliu'})"
res.send(data);
// res.jsonp({ name: 'lisi', age: 20 });
})8.2 $.get()$.post()
- 作用:$.get方法用于发送get请求,$.post方法用于发送post请求。
1
$.get('http://www.example.com', {name: 'zhangsan', age: 30}, function (response) {}) $.post('http://www.example.com', {name: 'lisi', age: 22}, function (response) {})
- 参数
- 作用:$.get方法用于发送get请求,$.post方法用于发送post请求。
- 参数1:发送的url地址
- 参数2:传递的参数值,没有参数可不传递
- 对象:{name: ‘zhangsan’, age: 30}
- 字符串:name=张三&age=30
- 参数3:直接结束调用的回调函数===success函数
- 代码
1
2
3
4
5
6
7
8
9
10
11
12
13$('#button').on('click', function () {
// 发送get请求
$.get('/base', { name: 'zhangsan', age: 40 }, function (response) {
console.log(response);
})
$.get('/base', 'name=张三&age=30', function (response) {
console.log(response);
})
$.post('/base', { name: 'zhangsan', age: 40 }, (response) => {
console.log(response);
})
})8.3 Todo案例
- 连接数据库为todo创建数据库服务认证,最后退出exit数据库
1
2
3
4
5
61 使用mongo命令进入mongodb数据库
2 使用use admin命令进入到admin数据中
3 使用db.auth(‘root’, ‘root’)命令登录数据库
4 使用use todo命令切换到todo数据库
5 使用db.createUser({user: ‘itcast’, pwd: ‘itcast’, roles: [‘readWrite’]})创建todo数据库账号
6 使用exit命令退出mongodo数据库连接数据库
1
2const mongoose = require('mongoose');
mongoose.connect('mongodb://sparkparis:123@localhost:27017/todo'); - 在页面操作中的增删改查任务一般都是先存储在数组中对数组进行增删改查,数组的操作相对于html标签更好操作,主流框架中都使用数据进行操作,这就是数据驱动dom
涉及知识点
- 代码
- 在删除操作中通过事件冒泡的方式:将删除子元素的li操作委派给父元素进行
- jQuery中on事件的用法
- 参数2:为子类选择器,添加子类选择器之后,函数中的$(this)指向的就是子类选择器选中的元素对象,而不是selector对象
1
$(selector).on(event,childSelector,data,function)
- 参数2:为子类选择器,添加子类选择器之后,函数中的$(this)指向的就是子类选择器选中的元素对象,而不是selector对象
- 删除操作中获取当前点击元素的id通过给删除的元素添加自定义属性data-id来获取当前点击的元素(注意:自定义属性为格式:data-名称)
Lodash工具
- 是一个一致性、模块化、高性能的JavaScript 实用工具库。
- 下载:
1
2npm i -g npm
npm i --save lodash - _.pick(object, [props]):创建一个从object中选中的属性
- Object:来源对象
- [props]:选中的属性名称数组
- 返回值:返回的是一个对象
- 使用链接
8.4 全局事件
- 只要页面中有Ajax请求被发送,对应的全局事件就会被触发
- 常用的全局事件
- .ajaxStart() // 当请求开始发送时触发
- .ajaxComplete() // 当请求完成时触发
- ajax的全局事件一定要绑定在document的上
8.4 nprogress进度条插件
- 引入插件来实现进度条功能nprogress
- 一套关于设计请求的风格(通过设计统一的api规范,请求方式有如下,在路由设置中解决路由命名不规范的问题)
- GET:获取数据
- POST:添加数据
- PUT:更新数据
- DELETE:删除数据
users => /users
articles => /articles
- RESTful API实现
- 客户端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40// 获取用户列表信息
$.ajax({
type: 'get',
url: '/users',
success: function (response) {
console.log(response);
}
})
// 获取指定用户的信息
$.ajax({
type: 'get',
url: '/users:1',
success: function (response) {
console.log(response);
}
})
// 添加用户信息
$.ajax({
type: 'post',
url: '/users',
success: function (response) {
console.log(response);
}
})
// 更新指定用户信息
$.ajax({
type: 'put',
url: '/users:3',
success: function (response) {
console.log(response);
}
})
// 删除指定用户信息
$.ajax({
type: 'delete',
url: '/users:10',
success: function (response) {
console.log(response);
}
}) - 服务器端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24// RESTful 风格的API实现
// - GET:获取当前用户信息数据
app.get('/users', (req, res) => {
res.send('获取当前用户信息数据');
})
// - GET:指定用户的信息
app.get('/user:id', (req, res) => {
const id = req.params.id;
res.send(`获取指定用户的信息${id}`)
})
// post:添加用户信息
app.post('/users', (req, res) => {
res.send(`添加用户信息`)
})
// - PUT:更新数据
app.put('/users:id', (req, res) => {
const id = req.params.id;
res.send(`更新指定用户的信息${id}`)
})
// - DELETE:删除数据
app.delete('/users:id', (req, res) => {
const id = req.params.id;
res.send(`删除指定用户的信息${id}`)
}) - 注意:通过占位符添加的路由,获取路由中传过来的值通过req.params.属性名的方式获取
- 客户端
9.2 XML
XML 的全称是 extensible markup language,代表可扩展标记语言,它的作用是传输和存储数据。和html标记语言类似,html主要是用来做展示的
XML DOM 即 XML 文档对象模型,是 w3c 组织定义的一套操作 XML 文档对象的API。浏览器会将 XML 文档解析成文档对象模型,使用时和html的文档对象操作方法一样。
示例代码
1
2
3
4
5
6
7
8
9
10<students>
<student>
<sid>001</sid>
<name>张三</name>
</student>
<student>
<sid>002</sid>
<name>王二丫</name>
</student>
</students>这里的标签都是自定义的标签,在通过ajax技术发送请求时需要设置发送内容的类型
res.header(‘content-type’,’text/xml’);在接收数据时通过xhr.responseXML获取xml数据代码实现
- 客户端
- xml对象获取元素对应的值和html的dom操作一样
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16btn.onclick = function () {
// 发送ajax请求
var xhr = new XMLHttpRequest();
xhr.open('get', '/xml');
xhr.send();
xhr.onload = function () {
// 获取服务器端返回的xml数据
var xmlDocument = xhr.responseXML;
// 获取元素对应的值和dom操作一样
console.log(xmlDocument)
var title = xmlDocument.getElementsByTagName('title')[0].innerHTML;
console.log(title)
// 将获取到的内容显示在当前页面
box.innerHTML = title
}
}
- xml对象获取元素对应的值和html的dom操作一样
- 服务器端
1
2
3
4
5// xml路由
app.get('/xml', (req, res) => {
// 设置内容类型
res.header('content-type', 'text/xml');
res.send(`<title>题目</title>`)})
- 客户端
实践知识点
- 解决ajax请求中参数拼接问题
- FormData方式:是在html5中新提出的方法,不兼容旧的低版本的浏览器
- Serialize方式
- url请求地址如果是同一个服务器协议域名和端口号部分都可以省略,只写路由后面的地址
本文作者:
SparkParis
本文链接: https://sparkparis.github.io/2020/04/25/Ajax%E7%AC%94%E8%AE%B03/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!
本文链接: https://sparkparis.github.io/2020/04/25/Ajax%E7%AC%94%E8%AE%B03/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!