原生JS、Ajax、Axios发送Ajax请求的对比
通过本文，简单总结一下原生JS、jQuery、Axios发送Ajax请求的不同，并总结了不同的前后端数据传输格式
·
原生JS发送Ajax请求
POST
<!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>
window.addEventListener('load',function(){
//获取form对象
var form = document.querySelector('form');
//添加form的submit监听事件
form.addEventListener('submit',function(e){
//阻止默认行为
e.preventDefault();
//创建FormData，快速获取form表单的数据
var fd = new FormData(form);
//原生xhq对象和使用
// 1. 创建 XHR 对象
var xhr = new XMLHttpRequest();
// 2. 调用 open 函数，指定 请求方式 与 URL地址
xhr.open('POST','http://localhost:9090/test');
// 3. 调用 send 函数，发起 Ajax 请求
xhr.send(fd);
// 4. 监听 onreadystatechange 事件（服务器响应后）
xhr.onreadystatechange = function(){
// 4.1 监听 xhr 对象的请求状态 readyState ；与服务器响应的状态 status
if(xhr.readyState === 4 && xhr.status === 200){
// 4.2 打印服务器响应回来的数据 xhr.responseText 代表服务器响应的数据
// console.log(JSON.parse(xhr.responseText)); //如果是json格式，则通过这一句把json转为js对象
var data = xhr.responseText;
console.log(data)
}
}
})
})
</script>
</head>
<body>
<form>
<input type="text" name="name" value="" placeholder="name">
<input type="text" name="age" value="" placeholder="age">
<input type="submit" value="submit">
</form>
</body>
</html>GET
把参数转为【查询字符串】格式，然后拼接到url后面即可
jQuery发送Ajax请求
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>
<script src="js/jquery-3.4.1.js"></script>
<script>
$(function(){
$('form').on('submit',function(e){
//Step1.阻止submit的默认行为
e.preventDefault();
//Step2.获取表单内所有的数据【各个input 一定要有name属性！】得到的是一个 查询字符串
var str = $('form').serialize();
//Step3.发送Ajax请求
$.ajax({
url: "http://localhost:9090/test", //后端地址
type: "text", //提交方式
method: "GET",
data: str,
dataType: "text", //规定请求成功后返回的数据
success: function (data) {
//请求成功之后进入该方法，data为成功后返回的数据
console.log(data);
console.log("发送ajax成功");
},
error: function (errorMsg) {
console.log(errorMsg);
console.log("发送ajax失败");
}
});
})
})
</script>
</head>
<body>
<form>
<input type="text" name="name" value="" placeholder="name">
<input type="text" name="age" value="" placeholder="age">
<button type="submit">submit</button>
</form>
</body>
</html>POST
<!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/jquery-3.4.1.js"></script>
<script>
$(function(){
$('form').on('submit',function(e){
//Step1.阻止submit的默认行为
e.preventDefault();
//Step2.获取表单内所有的数据【各个input 一定要有name属性！】得到的是一个 查询字符串
var str = $('form').serialize();
//Step3.发送Ajax请求
$.ajax({
url: "http://localhost:9090/test", //后端地址
type: "text", //提交方式
method: "POST",
data: str,
dataType: "text", //规定请求成功后返回的数据
success: function (data) {
//请求成功之后进入该方法，data为成功后返回的数据
console.log(data);
console.log("发送ajax成功");
},
error: function (errorMsg) {
console.log(errorMsg);
console.log("发送ajax失败");
}
});
})
})
</script>
</head>
<body>
<form>
<input type="text" name="name" value="" placeholder="name">
<input type="text" name="age" value="" placeholder="age">
<button type="submit">submit</button>
</form>
</body>
</html>Axios发送Ajax GET请求
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>
<script src="js/axios.js"></script>
<script>
window.addEventListener('load',function(){
var form = document.querySelector('form');
form.addEventListener('submit',function(e){
//1.消除默认事件
e.preventDefault();
//2.设置相关数据（form表单通过FormData获得对象，再把这个对象通过我们自己写的函数formdataTojson转为json格式的【对象】）
var formdata = new FormData(form);
var jsonObj = formdataTojson(formdata);
//3.通过axios发送ajax请求
axios({
method: 'GET',
url: 'http://localhost:9090/test',
// GET 参数要通过 params 属性提供【这个jsonObj是一个json格式的对象】
params: jsonObj
}).then(function(res) {
console.log(res.data)
})
})
//FormData 格式化 json格式的对象 函数
function formdataTojson(formData){
var object = {};
formData.forEach(function(value, key){
object[key] = value;
});
// return JSON.stringify(object); //把这个注释取消掉，就相当于返回json啦
return object;
}
})
</script>
</head>
<body>
<form>
<input type="text" name="name" placeholder="name" value="">
<input type="text" name="age" placeholder="age" value="">
<button type="submit">submit</button>
</form>
</body>
</html>POST
<!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/axios.js"></script>
<script>
window.addEventListener('load',function(){
var form = document.querySelector('form');
form.addEventListener('submit',function(e){
//1.消除默认事件
e.preventDefault();
//2.设置相关数据（form表单通过FormData获得对象，再把这个对象通过我们自己写的函数formdataTojson转为json格式的【对象】）
var formdata = new FormData(form);
var jsonObj = formdataTojson(formdata);
//3.通过axios发送ajax请求
axios({
method: 'POST',
url: 'http://localhost:9090/test',
// GET 参数要通过 params 属性提供【这个jsonObj是一个json格式的对象】
data: jsonObj
}).then(function(res) {
console.log(res.data)
})
})
//FormData 格式化 json格式的对象 函数
function formdataTojson(formData){
var object = {};
formData.forEach(function(value, key){
object[key] = value;
});
// return JSON.stringify(object); //把这个注释取消掉，就相当于返回json啦
return object;
}
})
</script>
</head>
<body>
<form>
<input type="text" name="name" placeholder="name" value="">
<input type="text" name="age" placeholder="age" value="">
<button type="submit">submit</button>
</form>
</body>
</html>数据格式
HTML5的formdata对象转换form获得的数据格式： {[K,V] , [K,V] , [K,V]}
-
原生JS发送Ajax的常用格式
resilize方法转换form对象获得的数据格式(查询字符串)： K=V&K=V&K=V
-
jQuery发送Ajax的常用格式：rerialize转为的查询字符串
json数据格式： {K=V , K=V , K=V}
-
需要通过自己编写一个函数，把formdata转为json对象，json对象作为Axios的数据传输格式
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
3
0- 0
已为社区贡献2条内容
所有评论(0)