ajax与axios
概念：ajax(Asynchronous Javascript And Xml):异步的js和xml
ajax作用：
1、使用ajax和服务器进行通信，就可以使用html+ajax替换jsp页面
2、异步交互
原生ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="myButton">点击我</button>
<script>document.getElementById("myButton").addEventListener("click", function() {
//1. 创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 发送请求
xhttp.open("GET", "http://localhost:8080/web-6/ajaxServlet");
xhttp.send();//3. 获取响应
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
});
</script></body>
</html>
axios封装ajax
学习文档（参考）： axios https://www.axios-http.cn/en/
w3cshool axios文档 ：https://www.w3cschool.cn/jquti/
菜鸟教程 ajax(axios) ：https://www.runoob.com/vue3/vue3-ajax-axios.html
axios的参数配置：https://blog.csdn.net/weixin_41277748/article/details/111470121
Axios 请求配置参数详解：https://blog.csdn.net/moxiaoya1314/article/details/73650751
引入js
<script src="js/axios-0.18.0.js"></script>
url:
1、简写 aa
2、在项目发布时，需要些绝对路径 http://localhost:8080/web-6/aa?username=zs&pw=1
get请求传参：url里面
axios({
method:"get",
url:"http://localhost:8080/web-6/aa?username=zs&pw=1"
}).then(function(res){ //响应回来的数据，赋值到res
alert(res.data);
})
post传参：通过data
axios({
method:'post',
url:'http://localhost:8080/web-6/aa',
data:'dd'
}).then(function(res){
alert(res);
console.log(res);
})
axios请求方式别名
为了 简化 开发者的 使用过程 ，axios 为所有支持的 请求方法 提供了 别名 。
get：获取数据
post：提交数据（表单提交+文件上传）
put：更新数据（所有数据推送到后端）
patch：更新数据（只将修改的数据推送到后端）
delete：删除数据
一般公司项目中，post用于新建，put用于更新，patch根据后端的具体规范（比如：一个表单的数据量很大，有很多项的情况一般用patch，因为数据比较多的情况下，推送一次会很耗费性能）
axios.post("http://localhost:8080/ServletVueElementUI/aa","username=d")
.then(function(res){
alert(res.data) ;
})
axios.get("http://localhost:8080/Servlet-Vue-ElementUI/aa?username=df")
.then(function(res){
alert(res.data) ;
})
参数
1、js对象与json对象对比：json的key加引号，（双引号/单引号）
2、Axios中，json字符串和js对象自动转换
js对象
js转json：JSON.stringify();
var jsStr={
name:"zs",
age:7,
address:[4,2],
ew:[["二维","数组"],[2,2]],
ob:{call:"对象",kong:null},
}console.log(JSON.stringify(jsStr)); //js对象转换成JSON
json对象（字符串）（js不能换行，或者字符串拼接）
json转js：JSON.parse();
//adress 一维数组 [ ] person 对象 { } er 二维数组 [ [ ] ] nullvar jsonStr = '{"name": "张三","age": 14,"address":["一维","数组"],"pserson":{"name":"对象","age":74,"er":[["二维","数组"],[2,null]]}}';
console.log(JSON.parse(jsonStr));
本文来自博客园，作者：hellowworld!，转载请注明原文链接：https://www.cnblogs.com/zhangsai/p/17638185.html
posted on 2023-08-17 17:50 hellowworld! 阅读(18) 评论(0) 编辑 收藏 举报
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！