一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情
一、form表单属性介绍。
1.action: 跳转到哪里; 不写，默认跳转到当前页面;(了解)
2.method: 请求方式; get/post
3.enctype: 传递参数的格式;
application/x-www-form-urlencoded：a=1&b=2&c=3(默认)
multipart/form-data 用于文件上传;
二、阻止提交并发送ajax 由于内容太过简单，直接上代码
document.querySelector('form').onsubmit = function (e) {
// 阻止表单提交
e.preventDefault();
// 发送ajax
axios({
method: 'post',
url: 'http://www.liulongbin.top:3009/api/form',
// 1.请求体参数 - 如果写的是对象，传递的类型是: json类型; application/json
data: {
username: document.querySelector("[name=username]").value,
password: document.querySelector("[name=password]").value,
}
// 2.请求体参数 - a=1&b=2&c=3 application/x-www-form-urlencoded
// data: `username=admin&password=123123`
}).then(({ data: res }) => {
console.log(res);
});
}
三、serialize获取表单数据 利用jquery
<!-- 导入 jquery.js -->
<script src="./lib/jquery.js"></script>
<script>
// 获取元素，绑定提交事件
document.querySelector('form').onsubmit = function (e) {
console.log($(this).serialize());
// 阻止表单提交
e.preventDefault();
// 发送ajax
axios({
method: 'post',
url: 'http://www.liulongbin.top:3009/api/form',
// jquery给我们提供了一种快速获取表单数据的方法
// this代指form表单的DOM对象;
// enctype 值为：application/x-www-form-urlencoded a=1&b=2&c=3
data: $(this).serialize()
}).then(({ data: res }) => {
console.log(res);
});
}
四、axios.get请求、post请求演示
设置全局基础路径
axios.defaults.baseURL = 'www.liulongbin.top:3009';
get请求
<!-- 导入 axios.js -->
<script src="./lib/axios.js"></script>
<script>
// 直接演示简单版 get 请求的 ajax
let url = 'http://www.liulongbin.top:3009/api/getbooks';
// get请求第一个参数是路径，第二个参数是配置信息;
axios.get(url, {
// 查询参数，通过params传递
params: {
id: 1,
bookname: '西游记'
}
}).then(({ data: res }) => {
console.log(res);
});
</script>
post请求
<!-- 导入 axios.js -->
<script src="./lib/axios.js"></script>
<script>
// 演示post请求
let url = 'http://www.liulongbin.top:3009/api/addbook';
let obj = { bookname: '三体a', author: '大刘', publisher: '武汉出版社' };
// post请求，第一个参数是路径，第二个参数是请求体参数;
axios.post(url, obj).then(({ data: res }) => {
console.log(res);
});
</script>
五、自己封装的ajax，欢迎参考借鉴
// 公共的js: common.js tools.js public.js
// // 封装一个方法，里面有很多的属性，控制ajax的发送和接收;
// itcast({
// method: '', // 类比 axios 中的 method
// url: '', // 类比 axios 中的 url
// params: {}, // 类比 axios 中的 params
// data: {}, // 类比 axios 中的 data
// success: function(res) {} // success是接收响应信息的处理函数，类比 then(res => {})
// });
// 封装一个方法，对象转换为字符串
// {a:1,b:2,c:3} => "a=1&b=2&c=3"
function objectToString(obj) {
// 思路: 属性和值，链接为a=1类型，添加到数组中，最后用&链接在一起;
let arr = [];
for (let k in obj) {
// k属性 obj[k]值 a=1 添加到数组中
arr.push(`${k}=${obj[k]}`);
}
// 循环完毕后
return arr.join('&');
}
// 封装函数: 需要传递参数，有且只有一个参数，参数最起码要有五个属性:
// method 请求方式，url 资源路径，params 查询参数，
// data 请求体参数，success d接收数据回掉函数;
function itcast(config) {
// 1.创建
let xhr = new XMLHttpRequest();
// 4.接收
xhr.onload = function () {
// JOSN类型字符串，转换为对象类型，称为反序列化;
let obj = JSON.parse(xhr.response);
// obj就是接收到的响应数据，config.success就是要处理这个数据的函数;
config.success(obj);
}
// 判断请求方式
if (config.method.toUpperCase() == 'GET') {
// 判断参数类型: "a=1&b=2&c=3" {a:1,b:2,c:3} 无参
if (typeof config.params == 'string') {
// 2.设置
xhr.open('GET', config.url + "?" + config.params);
// 3.发送
xhr.send();
} else if (typeof config.params == 'object') {
// 2.设置 objectToString()自己封装，把对象类型，转换为字符串类型a=1&b=2&c=3
xhr.open('GET', config.url + "?" + objectToString(config.params));
// 3.发送
xhr.send();
} else if (typeof config.params == 'undefined') {
// 2.设置
xhr.open('GET', config.url);
// 3.发送
xhr.send();
}
} else if (config.method.toUpperCase() == 'POST') {
// 判断请求体参数: "a=1&b=2&c=3" {a:1,b:2,c:3}
if (typeof config.data == "string") {
// 2.设置
xhr.open('POST', config.url);
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 3.发送
xhr.send(config.data);
} else if (typeof config.data == "object") {
// 2.设置
xhr.open('POST', config.url);
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
// 3.发送 - 序列化，转换为JSON类型的字符串;
xhr.send(JSON.stringify(config.data));
}
}
}
