axios-config模式和FromData函数和axios基地地址
axios-config模式
axios是ajax的库，可以去官网下载axios的js文件，调用即可
<h2>axios的config模式</h2> <button class="get">get请求</button> <button class="post">post请求</button> <script src="./lib/axios.js"></script> <script> // 1. 测试get请求 // 机器人聊天接口：http://ajax-api.itheima.net/api/robot document.querySelector(`.get`).onclick = () => { // console.log(1) axios({ method:`get`, url : `http://ajax-api.itheima.net/api/news`, // 请求参数 params : { spoken:`你吃饭了吗` } }).then(res => { console.log(`res`,res)}) } // 2.测试post请求 ：http://ajax-api.itheima.net/api/login // 账号：admin 密码：123456 document.querySelector(`.post`).onclick = () => { axios({ method: `post`, url: `http://ajax-api.itheima.net/api/login`, data : { username : `admin`, password : `123456` } }).then(res => { console.log(res) }) } </script>
表单ajax提交
<h2>ajax+form</h2> <!--action 提交的接口地址 method 提交的方法--> <form action="http://ajax-api.itheima.net/api/data" method="post"> <!-- name 提交到服务器数据的 key --> <input class="username" name="username" type="text" placeholder="请输入用户名" /> <br /> <input class="food" name="food" type="text" placeholder="请输入喜欢的食物" /> <br /> <input class="sign" name="sign" type="textarea" placeholder="请输入个性签名" /> <br /> <input class="male" name="male" type="textarea" placeholder="请输入性别" /> <br /> <button type="submit">提交</button> </form> <script src="./lib/axios.js"></script> <script> // http://ajax-api.itheima.net/api/data document.querySelector(`form`).addEventListener(`submit`,(e) => { // console.log(1) e.preventDefault() //阻止默认行为 //ajax axios({ method : `post`, url : `http://ajax-api.itheima.net/api/data`, data : { username : document.querySelector(`.username`).value, // password : ``, food : document.querySelector(`.food`).value, sign : document.querySelector(`.sign`).value, male : document.querySelector(`.male`).value, } }).then(res => { console.log(res)}) }) </script>
form-serialize插件
可以获取表单中所有数据，并且可以转换为JSON或者对象属性，我们集中给Ajax传入参数
<h2>ajax+form-插件</h2> <!-- action 提交的接口地址 method 提交的方法 --> <form action="http://ajax-api.itheima.net/api/data" method="post"> <!-- name 提交到服务器数据的 key --> <input class="username" name="username" type="text" placeholder="请输入用户名" /> <br /> <input class="food" name="food" type="text" placeholder="请输入喜欢的食物" /> <br /> <input class="sign" name="sign" type="textarea" placeholder="请输入个性签名" /> <br /> <input class="male" name="male" type="textarea" placeholder="请输入性别" /> <br /> <input class="male" name="hobby" type="textarea" placeholder="请输入爱好" /> <br /> <input class="male" name="age" type="textarea" placeholder="请输入年龄" /> <br /> <button type="submit">提交</button> </form> <script src="./lib/axios.js"></script> <!-- 1. 导入插件 --> <script src="./lib/form-serialize.js"></script> <script> // http://ajax-api.itheima.net/api/data document.querySelector(`form`).onsubmit = (e) => { e.preventDefault() //阻止默认提交事件 // hash:false //键值对，字符串 console.log(serialize(document.querySelector(`form`),{hash:true})) let data = serialize(document.querySelector(`form`),{hash:true}) //获取表单的每个元素 console.log(data) axios({ method:`post`, url : `http://ajax-api.itheima.net/api/data`, data, }).then(res => { console.log(res)}) } </script>
FromData属性的基本信息
FromData是浏览器提供的内置对象，是一个构造函数，需要new出来，是以键值对的形式保存数据的，能够结合Ajax进行数据交互
添加数据以后通过实例化看不到添加的数据，需要使用get（不是Ajax的方式，是他自己的方式，实例化对象.get（对应的键））方式才可以看到
创建方法：通过new关键字实例化，.append(key，value)添加数据，.get（key）获取对应的值。可以用来保存文件
<script> let data = new FormData() console.log(data) // 往实例化对象添加 data.append(`uname`,`rose`) //添加数据 console.log(data) // 实例化对象.get(`键名`) console.log(data.get(`uname`)) //获取对应key的值 </script>
FromData-type = file语法补充
是吧img图片往后端传递的
<script> const input = document.querySelector(`[type = "file"]`) input.onchange = (e) => { console.log(e) // 后续把相关信息传给后端 console.log(e.target.files[0]) } </script>
头像上传格式
<h2>直接通过FormData</h2> <!-- e.target.files[0] --> <!-- 推荐用户选择 图片 --> <input type="file" accept="image/*" /> <img src="" alt="" /> <!-- 点击按钮 上传用户选择的图片 --> <button>上传</button> <script src="./lib/axios.js"></script> <script> // 1.点击按钮上传图片 document.querySelector(`button`).onclick = () => { // console.log(1) const img = document.querySelector(`input`).files[0] // console.log(img) // 传给后端一定要使用FromData格式 const data = new FormData() //实例化FromData data.append(`avatar`,img) //键名是需要根据参数来更改的 console.log(data.get(`avatar`)) // 上传头像参数 axios({ url:`http://ajax-api.itheima.net/api/file`, method : `post`, data : data }).then(res => { // console.log(res) console.log(res.data.data.url) document.querySelector(`img`).src = res.data.data.url }) } </script>
使用不同的数据格式上传头像
<h2>form-data</h2>
<input class="ipt" type="file" accept="image/*" />
<h2>application/json</h2>
<button class="json">测试登录接口</button>
<h2>urlencoded</h2>
<button class="urlencoded">测试urlencoded格式</button>
<script src="./lib/axios.js"></script>
<script>
// http://ajax-api.itheima.net/api/file
// 1.测试formData
document.querySelector('.ipt').onchange = function (e) {
// 调用头像上传接口 提交图片
const data = new FormData()
data.append('avatar', e.target.files[0])
axios({
url: 'http://ajax-api.itheima.net/api/file',
method: 'post',
data: data,
}).then((res) => {
console.log('res:', res)
})
}
// 2.测试application/json
document.querySelector('.json').onclick = function () {
axios
.post('http://ajax-api.itheima.net/api/login', {
username: 'admin',
password: '123456',
})
.then((res) => {
console.log('res:', res)
})
}
// 3.测试 application/x-www-form-urlencoded
document.querySelector('.urlencoded').onclick = function () {
axios({
url: 'http://ajax-api.itheima.net/api/data',
method: 'post',
data: 'name=jack&age=18&friend=rose',
}).then((res) => {
console.log('res:', res)
})
}
</script>
axios基地址
<h2>axios的config模式</h2>
<button class="get">get请求</button>
<button class="post">post请求</button>
<script src="./lib/axios.js"></script>
<script>
// 我要设置基地址
axios.defaults.baseURL = `http://ajax-api.itheima.net`
// 1. 测试get请求
document.querySelector('.get').onclick = function () {
axios({
// get请求传递参数-->拼接到url中
params: {
spoken: '好无聊呀!',
},
// 方法 默认就是get
// method: 'get',
// 地址
url: '/api/robot',
}).then((res) => {
console.log('res:', res)
})
}
// 2.测试post请求
document.querySelector('.post').onclick = function () {
axios({
url: '/api/login',
method: 'post',
data: {
username: 'admin',
password: '123456',
},
}).then((res) => {
console.log('res:', res)
})
}
</script>
浙公网安备 33010602011771号