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! 阅读(13) 评论(0) 编辑 收藏 举报