ajax学习第三天
1. XMLHttpRequest
1.1 xhr的概念
- 是浏览器提供的js对象，通过它，可以请求服务器上的数据资源，jQuery中的ajax函数，就是基于xhr对象封装出来的
1.2 使用xhr发起get请求
- 步骤
- 创建xhr对象
- 调用open函数
- 调用send函数
- 监听xhr状态
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 创建xhr对象
var xhr = new XMLHttpRequest();
// 调用xhr对象的open函数，指定请求方式和url地址
xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");
// 调用xhr的send函数
xhr.send();
//监听onreadystatechange
xhr.onreadystatechange = function() {
// 判断xhr的请求状态(readyState)和服务器的响应状态（status），
// 固定写法，与返回信息里面的status不是同一个值
if (xhr.readyState === 4 && xhr.status === 200) {
// 打印返回的信息
console.log(xhr.responseText);
}
}
</script>
</body>
</html>
- 效果图
1.3 xhr对象的readyState属性
- 表示当前Ajax请求所处的状态，每个Ajax请求必然处于以下状态的一个
| 值 | 状态 | 说明 |
|---|---|---|
| 0 | UNSET | xhr对象已创建，open函数未调用 |
| 1 | OPENED | open()方法已经被调用 |
| 2 | HEADERS_RECEIVED | send()方法已调用，响应头已被接收 |
| 3 | LOADING | 数据接收中，其中response属性已经包含部分数据 |
| 4 | DONE | Ajax请求完成，数据已经彻底传输成功或者失败 |
1.4 使用xhr发起带参数的get请求
- 在调用open()函数期间，为url地址拼接参数字符串（查询字符串）
xhr.open("GET","http://www.liulongbin.top:3006/api/getbooks?id=1")
- ?id=1为url后面拼接的字符串，称为查询字符串
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest();
// 发起带参数的get请求
xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1");
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
</script>
</body>
</html>
- 效果图
1.5 查询字符串
-
在url的末尾加上用于向服务器发送信息的字符串（变量）
-
格式：将英文？放在url的末尾，然后在加上参数=值，如果添加多个参数，参数之间使用&符号分隔
-
示例：多个参数的url地址
"http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记"
1.6 get请求携带参数的本质
-
无论是使用jQuery封装的ajax函数，get函数，还是xhr对象的open函数，都是将参数放在url地址尾部（拼接字符串）
-
示例
$.get("url",{name:'666',age:18},function(){})
//等价于
$.get("url?name:666&age:18",function(){})
$.ajax(method:"get",url:"url",data{name:'666',age:18},success:function(){})
//等价于
$.ajax(method:"get",url:"url?name:666&age:18",success:function(){})
1.7 URL 编码
- 场景：在url地址中，只允许出现英文相关的字母、标点符号、数字，不允许出现中午字符，如果出现，需要对中文字符进行编码
- 使用英文字符（安全的字符）表示非英文字符（不安全的字符）
- 编码前
xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记");
- 编码后
1.8 URL的编码和解码
- 编码函数：encodeURL()
- 解码函数：decodeURL()
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var str = '我是编码函数';
// 使用编码函数编码
var result = encodeURI(str);
console.log(result);
// 使用解码函数解码
var result2 = decodeURI(result.substr(9));
console.log(result2);
</script>
</body>
</html>
- 效果图
1.9 使用xhr发起post请求
- 步骤
- 创建xhr对象
- 调用open()函数
- 设置Content-Type属性（固定写法）
- 调用send()函数，指定要传输的数据（已查询字符串的格式）
- 监听onreadystatechange 事件
- 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 创建xhr对象
var xhr = new XMLHttpRequest();
// 调用open函数，设置方式为post
xhr.open('post', 'http://www.liulongbin.top:3006/api/addbook');
// 设置Content-Type属性
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 调用send函数，传递要提交的数据
xhr.send('bookname=一念永恒&author=耳根&publisher=上海图书出版社');
//监听 onreadystatechange事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
</script>
</body>
</html>
- 效果图
2. 数据交换格式
- 定义：服务器端与客户端之间**进行数据传输和交换的格式**
- 前端提及的交换格式
- xml
- json（常用）
2.1 XML
- XML(EXtensible Markup Language)，可扩展标记语言，与html一样，也是页面标记语言
2.2 XML与HTML的区别
- HTML用于描述网页上的内容，是网页内容的载体
- XML被设计用于传输和存储数据，是数据的载体
2.3 XML的缺点
2.4 JSON
- 定义：JSON(JavaScript Object Notation),即JavaScript对象表示法，json就是JavaScript对象和数组的字符串表示法****，本质是字符串
- 作用：作用上类型XML，但比XML更小，更快，更容易解析
2.4.1 JSON的两种结构
- 对象结构
- 数组结构
2.4.2 JSON的对象结构
-
对象结构，json中用{}包裹起来的结构，形式为{key,value},其中==key必须使用""包裹，value的数据类型可以是数字，字符串（双引号包裹），布尔值，null，数组，对象==
-
示例
2.4.3 JSON的数组结构
-
数组结构：JSON中用[]包裹起来的内容，其中的内容可以是，数字，字符串，布尔值，null，数组，对象
-
示例
注意点
2.5 json和js对象
- 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// js对象
var obj = {
key: 100,
value: 50
}
// json 字符串
var json = '{"key":100,"value":50}';
</script>
</body>
</html>
2.5.1 json和js对象的转换
- 将json对象转换成js对象(JSON.parse())
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 一个json字符串
var json = '{"a":"hello","b":"world"}';
// 将json字符串转换成js对象
var obj = JSON.parse(json);
console.log(obj);
</script>
</body>
</html>
- 效果图
- 将 js对象转换成 JSON对象(JSON.stringify())
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 一个js对象
var obj = {
a: 'world',
b: 'hello'
}
// 转换成json字符串
var json = JSON.stringify(obj);
console.log(json);
</script>
</body>
</html>
- 效果图
发起get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 新建xhr对象
var xhr = new XMLHttpRequest();
// open
xhr.open("GET", "http://www.liulongbin.top:3006/api/getbooks");
// send
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
// 将json字符串转换成对象
var obj = JSON.parse(xhr.responseText);
console.log(obj);
}
}
</script>
</body>
</html>
- 效果图
2.6 序列化和反序列化
- 将数据对象转换成字符串的过程，**称为序列化，**JSON.stringify()叫做JSON的序列化
- 将字符串类型转换成数据对象的过程，**叫做反序列化，**JSON.parse()叫做JSON的反序列化
2.7 封装一个自己的Ajax函数
- myajax.js
// 转换data对象 为拼接字符串
function switchDate(data) {
var arr = [];
for (k in data) {
var str = k + '=' + data[k];
arr.push(str);
}
return arr.join("&");
}
// 实现ajax函数的作用
function myajax(obj) {
// 拼接字符串
var qs = switchDate(obj.data);
var xhr = new XMLHttpRequest();
if (obj.method.toUpperCase() === 'GET') {
xhr.open("GET", obj.url + '?' + qs);
xhr.send();
} else if (obj.method.toUpperCase() === 'POST') {
xhr.open("POST", obj.url);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(qs);
}
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var jsonstr = xhr.responseText;
var jsobj = JSON.parse(jsonstr);
obj.success(jsobj);
}
}
}
- 测试的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/MyAjax.js"></script>
</head>
<body>
<script>
myajax({
method: "GET",
url: "http://www.liulongbin.top:3006/api/getbooks",
data: {
id: 1
},
success: function(res) {
console.log(res);
}
})
myajax({
method: "post",
url: 'http://www.liulongbin.top:3006/api/addbook',
data: {
bookname: '一念永hen',
author: '耳根',
publisher: '上海图书出版社'
},
success: function(res) {
console.log(res);
}
})
</script>
</body>
</html>
- 效果图
3. XMLHttpRequest Level2的新特性
3.1 旧版xhr的缺点
- 只支持文本数据的传输，无法用来读取和上传文件
- 传输和接收数据时，没有进度信息，只能提示有没有完成
3.2 xhr 2的新功能
- 可以设置HTTP请求的时限
- 可以使用FormData对象管理表单数据
- 可以上传文件
- 可以获得数据传输的进度信息
3.3 设置HTTP请求时限
- 设置xhr的timeout属性
xhr.timeout=300 //单位是毫秒
- 超时后的回调函数
xhr.ontimeout=function(){}
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest();
// 设置http请求时限
xhr.timeout = 30;
// 超时处理函数
xhr.ontimeout = function() {
console.log("请求超时");
}
xhr.open("get", "http://www.liulongbin.top:3006/api/getbooks");
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
</script>
</body>
</html>
- 效果图
3.4 xhr2的FormData对象
- 用于实现表单的数据收集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 创建FormData 对象
var fd = new FormData();
// 向FormData对象中添加数据
fd.append("id", "2");
// 创建xhr对象
var xhr = new XMLHttpRequest();
xhr.open("post", "http://www.liulongbin.top:3006/api/formdata");
// 发送formdate对象
xhr.send(fd);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
}
</script>
</body>
</html>
- 效果图
示例：实现表单数据的收集（注意阻止表单的默认提交行为）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="form1">
姓名：<input type="text" name="uname"> 密码：
<input type="password" name="upwd">
<button type="submit">提交</button>
</form>
<script>
// 选择表单元素
var form1 = document.querySelector("#form1");
// 创建FormData对象
form1.addEventListener("submit", function(e) {
// 阻止表单默认提交
e.preventDefault();
// 把form1传入fd
var fd = new FormData(form1);
var xhr = new XMLHttpRequest();
xhr.open("post", "http://www.liulongbin.top:3006/api/formdata");
xhr.send(fd);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
}
})
</script>
</body>
</html>
- 效果图
3.5 xhr实现文件上传
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 选择文件按钮 -->
<input type="file" id="select">
<!-- 上传文件到服务器的按钮 -->
<button id="upload">上传文件</button>
<!-- 显示上传给服务器的图片 -->
<img src="" alt="">
<script>
// 获取上传按钮
var upload = document.querySelector("#upload");
var select = document.querySelector("#select");
// 绑定点击事件
upload.addEventListener("click", function() {
// 判断是否选择了文件
if (select.files.length > 0) {
// 创建FormData对象
var fd = new FormData();
// 将文件加入fd中
fd.append("avatar", select.files[0]);
// 创建xhr对象
var xhr = new XMLHttpRequest();
xhr.open("post", 'http://www.liulongbin.top:3006/api/upload/avatar');
xhr.send(fd);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var res = JSON.parse(xhr.responseText);
// 根据服务器的返回信息判断是否上传成功
if (res.status === 200) {
console.log(res);
// 将服务器返回的url地址获取
document.querySelector("img").src = 'http://www.liulongbin.top:3006' + res.url;
} else {
alert("文件上传失败");
}
}
}
} else {
return alert("请选择要上传的文件");
}
})
</script>
</body>
</html>
- 效果图
3.6 显示上传的进度
xhr.upload.onprogress = function(e) {
// 判断当前资源是否具有可计算的长度
if (e.lengthComputable) {
// e.loaded 已经上传的字节数
// e.total 上传的总字节数
console.log(Math.ceil(e.loaded / e.total * 100));
}
}
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 选择文件按钮 -->
<input type="file" id="select">
<!-- 上传文件到服务器的按钮 -->
<button id="upload">上传文件</button>
<!-- 显示上传给服务器的图片 -->
<img src="" alt="">
<script>
// 获取上传按钮
var upload = document.querySelector("#upload");
var select = document.querySelector("#select");
// 绑定点击事件
upload.addEventListener("click", function() {
// 判断是否选择了文件
if (select.files.length > 0) {
// 创建FormData对象
var fd = new FormData();
// 将文件加入fd中
fd.append("avatar", select.files[0]);
// 创建xhr对象
var xhr = new XMLHttpRequest();
// 监听文件上传的进度
xhr.upload.onprogress = function(e) {
// 判断当前资源是否具有可计算的长度
if (e.lengthComputable) {
// e.loaded 已经上传的字节数
// e.total 上传的总字节数
console.log(Math.ceil(e.loaded / e.total * 100));
}
}
xhr.open("post", 'http://www.liulongbin.top:3006/api/upload/avatar');
xhr.send(fd);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var res = JSON.parse(xhr.responseText);
// 根据服务器的返回信息判断是否上传成功
if (res.status === 200) {
console.log(res);
// 将服务器返回的url地址获取
document.querySelector("img").src = 'http://www.liulongbin.top:3006' + res.url;
} else {
alert("文件上传失败");
}
}
}
} else {
return alert("请选择要上传的文件");
}
})
</script>
</body>
</html>
- 效果图
3.7 进度条ui(使用了bs3框架)
<link rel="stylesheet" href="./lib/bootstrap.css">
<!-- 进度条效果 -->
<div class="progress" style="width:300px">
<div class="progress-bar progress-bar-striped active" style="width: 0">
0%
</div>
</div>
- js部分
xhr.upload.onprogress = function(e) {
// 判断当前资源是否具有可计算的长度
if (e.lengthComputable) {
// e.loaded 已经上传的字节数
// e.total 上传的总字节数
console.log(Math.ceil(e.loaded / e.total * 100));
// 修改进度条的样式
$(".progress .progress-bar").css({
width: Math.ceil(e.loaded / e.total * 100) + '%'
}).html(Math.ceil(e.loaded / e.total * 100) + '%');
}
}
- 总的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<script src="./lib/jquery.js"></script>
</head>
<body>
<!-- 选择文件按钮 -->
<input type="file" id="select">
<!-- 上传文件到服务器的按钮 -->
<button id="upload">上传文件</button>
<!-- 显示上传给服务器的图片 -->
<img src="" alt="">
<!-- 进度条效果 -->
<div class="progress" style="width:300px">
<div class="progress-bar progress-bar-striped active" style="width: 0">
0%
</div>
</div>
<script>
// 获取上传按钮
var upload = document.querySelector("#upload");
var select = document.querySelector("#select");
// 绑定点击事件
upload.addEventListener("click", function() {
// 判断是否选择了文件
if (select.files.length > 0) {
// 创建FormData对象
var fd = new FormData();
// 将文件加入fd中
fd.append("avatar", select.files[0]);
// 创建xhr对象
var xhr = new XMLHttpRequest();
// 监听文件上传的进度
xhr.upload.onprogress = function(e) {
// 判断当前资源是否具有可计算的长度
if (e.lengthComputable) {
// e.loaded 已经上传的字节数
// e.total 上传的总字节数
console.log(Math.ceil(e.loaded / e.total * 100));
// 修改进度条的样式
$(".progress .progress-bar").css({
width: Math.ceil(e.loaded / e.total * 100) + '%'
}).html(Math.ceil(e.loaded / e.total * 100) + '%');
}
}
xhr.open("post", 'http://www.liulongbin.top:3006/api/upload/avatar');
xhr.send(fd);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var res = JSON.parse(xhr.responseText);
// 根据服务器的返回信息判断是否上传成功
if (res.status === 200) {
console.log(res);
// 将服务器返回的url地址获取
document.querySelector("img").src = 'http://www.liulongbin.top:3006' + res.url;
} else {
alert("文件上传失败");
}
}
}
} else {
return alert("请选择要上传的文件");
}
})
</script>
</body>
</html>
- 效果图
3.8 监听文件上传成功
// 文件上传成功的回调函数
xhr.upload.onload = function() {
$(".progress .progress-bar").removeClass().addClass("progress-bar progress-bar-success");
}
- 效果图
4. jQuery实现文件上传
- ajaxStart和ajaxComplete函数
// 监听 ajax请求发起时的函数
$(document).ajaxStart(function() {
// 回调函数中显示加载的图片
$("#loading").show();
})
// 监听 ajax请求结束的函数 ajax
$(document).ajaxComplete(function() {
$("#loading").hide();
})
- 上传文件时的设置
// 不修改content-Type的值，使用FormData默认的content-Type的值
contentType: false,
// 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
processData: false,
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./lib/bootstrap.css"> -->
<script src="./lib/jquery.js"></script>
</head>
<body>
<!-- 选择文件按钮 -->
<input type="file" id="select">
<!-- 上传文件到服务器的按钮 -->
<button id="upload">上传文件</button>
<img src="./loading.gif" alt="" style="display: none;" id="loading">
<!-- 显示上传给服务器的图片 -->
<br>
<img src="" alt="" id="pic">
<script>
// 判断是否有文件选中
$(function() {
$("#upload").on("click", function() {
// 转换成dom对象判断是否有文件
if ($("#select")[0].files.length > 0) {
var fd = new FormData();
fd.append("avatar", $("#select")[0].files[0]);
// 监听 ajax请求发起时的函数
$(document).ajaxStart(function() {
// 回调函数中显示加载的图片
$("#loading").show();
})
// 监听 ajax请求结束的函数 ajax
$(document).ajaxComplete(function() {
$("#loading").hide();
})
$.ajax({
method: "post",
url: 'http://www.liulongbin.top:3006/api/upload/avatar',
data: fd,
// 不修改content-Type的值，使用FormData默认的content-Type的值
contentType: false,
// 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
processData: false,
success: function(res) {
console.log(res);
$("#pic").attr("src", 'http://www.liulongbin.top:3006' + res.url)
}
})
} else {
return alert("请先选择文件");
}
})
})
</script>
</body>
</html>
- 效果图
5. axios
- 专注于网络数据请求的库
- 相当于xhr，axios简单易用
- 相对于jQuery，更加轻量化
5.1 使用axios发起get请求
- 语法
axios.get('url',{params:{参数}}).then(回调函数)
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入axios 文件 -->
<script src="./lib/axios.js"></script>
</head>
<body>
<button id="btn">get请求</button>
<script>
document.querySelector("#btn").addEventListener("click", function() {
// 发起get请求
var url = "http://www.liulongbin.top:3006/api/get";
var data = {
name: "zs",
age: 18,
}
axios.get(url, {
params: data
}).then(function(res) {
console.log(res);
// res是axios封装的数据
// res.data才是服务器返回的数据
console.log(res.data);
})
})
</script>
</body>
</html>
- 效果图
5.2 使用axios发起post请求
- 语法
axios.post('url',{参数}).then(回调函数)
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/axios.js"></script>
</head>
<body>
<button id="btn">post请求</button>
<script>
document.querySelector("#btn").addEventListener("click", function() {
// 发起post请求
var url = 'http://www.liulongbin.top:3006/api/post';
var data = {
id: 1,
name: "k"
}
axios.post(url, data).then(function(res) {
console.log(res.data);
})
})
</script>
</body>
</html>
- 效果图
5.3 直接使用axios发起get和post请求
- 语法
axios({
method:'请求类型',
url:'请求地址',
data:{
post请求的参数
},
params:{
get请求参数
}
}).then(回调函数)
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/axios.js"></script>
</head>
<body>
<button id="btn1">get请求</button>
<button id="btn2">post请求</button>
<script>
// get请求
document.querySelector("#btn1").addEventListener("click", function() {
axios({
method: 'get',
url: 'http://www.liulongbin.top:3006/api/get',
params: {
name: "k",
age: 18
}
}).then(function(res) {
console.log(res.data);
})
})
// post请求
document.querySelector("#btn2").addEventListener("click", function() {
axios({
method: 'post',
url: 'http://www.liulongbin.top:3006/api/post',
data: {
id: 1,
name: "666"
}
}).then(function(res) {
console.log(res.data);
})
})
</script>
</body>
</html>
- 效果图
856
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
