1.什么是Ajax
Ajax 是浏览器中的技术:用来实现客户端网页请求服务器的数据。 它的英文全称是 Asynchronous Javascript And XML,简称
Ajax
。
ajax
需要基于浏览器,意味着有浏览器才会有ajax
,没有浏览器就没有我们所说的ajax
静态资源(网页,图片)不需要ajax,动态数据才需要ajax
在前端领域,服务器可以看出一台电脑,客户端就是 浏览器
生活中的Ajax :
1.动态检测用户名是否被占用
2.动态加载搜索的建议列表
3.局部刷新网页的数据
2.Ajax请求方式
5种请求方式:
1、POST 向服务器新增数据
2、GET 从服务器获取数据
3、DELETE 删除服务器上的数据
4、PUT 更新服务器上的数据(侧重于完整更新:例如更新用户的完整信息)
扫描二维码关注公众号,回复: 13837939 查看本文章5、PATCH 更新服务器上的数据(侧重于部分更新:例如只更新用户的手机号)
3.axios 库
axios
(发音:艾克C奥斯) 是前端圈最火的、专注于数据请求的库。Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js
在后面的 Vue、React 课程中都会用到 axios 来请求数据。
中文官网地址:Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js 英文官网地址:axios - npm
4.Axios API
可以向
axios
传递相关配置来创建请求ajax 面向文档编程
只有
url
是必需的。如果没有指定method
,请求将默认使用GET
方法。
4-1 基本语法如下:
执行 GET
请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 上面的请求也可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行 POST
请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行多个并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
4-2 axios(config)
// 1.引入资源,引入之后,就会在全局挂载一个axios实例,我们发请求就可以直接使用这个实例
<script src="./lib/axios.js"></script>
// 2.axios({ 配置 }).then(请求成功的回调函数)
axios({
method: '请求的类型', // method:请求方式,如get,post,这个方式一定要参照接口文档
url: '请求的URL地址' // url:必须的,如果没有报错,它是请求地址--服务器资源地址
}).then((result) => { // result 可以顺便一个
// then 用来指定请求成功之后的回调函数
// 形参中的 result 是请求成功之后的结果
})
基于 axios 发起 GET 请求:
测试 GET 请求的 URL 地址为 http://www.zeng.com:3006/api/getbooks
注意:本次测试是模拟接口,具体接口看后端给的接口文档
axios({
method: 'GET',
url: 'http://www.zeng.com:3006/api/getbooks'
}).then((result) => {
console.log(result)
})
// result:
{
config: { url: 'http://xxxx', ss: 'xx' },
data: { code: 0, message: '成功', data: ['xx', 'yy'] },
headers: { 'content-length': '1054', },
request: { readyState: 4 },
status: 200,
statusText: 'OK'
}
// result是一个对象 result.data 才是服务器返回的结果 但data里面还有对象数据
// 可以使用解构对函数参数传参
then(({data}) => { console.log({data})})
GET 请求的查询参数
刚才查询回来的是所有图书的列表数据,如果想指定查询的条件,可以通过
params
选项来指定查询的参数:可以查询多个或单个
// 第一种传参写法 :parmas 用于查询多个参数
axios({
method: 'get',
url: 'http://www.zeng.com:3006/api/getbooks',
params: {
id:1, // 表示获取 id=1 的图书
bookname: 'love' // 表示获取 id=1 并且 bookname=love 的图书
}
}).then((result) => { console.log(result) })
`细节:
1.params固定写死
2.params是一个对象,里面的每组键值对就是一个一个的参数和值
3.可以传递多个参数`
// 第二种写法get方式的参数也可以在url中拼接,格式为: ?参数=值&参数=值
url: 'http://www.zeng.com:3006/api/getbooks?id=10338',
`细节:
1.不能在参数中写空格,除非真的需要
2.字符串不用加引号
3.?是必需的
4.参数名一定要参照文档的说明,不能随意乱写`
基于 axios 发起 POST 请求
注意点:GET请求提交数据用 params , POST请求提交数据用 data
put,patch,post 的参数需要使用data来设置
完整地址:服务器地址 + 资源路径
axios({
method: 'POST',
url: 'http://www.zeng.com:3006/api/addbook',
// 请求体 data
data: { // POST 是新增数据,使用data添加属性和属性值
bookname: '水浒传',
author: '施耐庵',
publisher: '顺义出版社'
}
}).then(result => {
console.log(result.data.message) // 提示是否添加成功
})
`result.data.status
status=0 说明当前请求成功 status=1说明请求不成功`
5.axios所支持的参数格式
对象:{key:value,key:value},axios内部会进行转换为key=value&key=value
字符串: key=value&key=value&key=value....
json字符串:'{"key":"value","key":"value"}'
formdata:new Formdata