Ajax_axios发送ajax请求
Ajax_axios发送ajax请求
这篇笔记主要讲一下axios基本的发送ajax请求的方法
axios在当前的前端行业里面是用的比较热门的一个
下面给大家分享一下它axios的一个基本用法
这段代码包含了post 跟get方法
从代码里面我们可以看出这个方法用起来是相对的简洁一些,其实axios还有很多的方法
在这里就不给大家一一的写出来了 大家如果真的想了解这个的话 也可以去到axios的官方文档里面 里面有更多更详细的介绍噢。
在这里解析一下 这个baseURL是对路径的一个简化 相当于定义一个固定的前缀参数 当我们后面用到的时候就可以省略前面固定的代码
只需要在后面的接口跟上路径名称即可,这样可以大大的节省我们在调试开发的时的 时间。
//baseURL是对路径的一个简化
//配置baseURL
axios.defaults.baseURL = "http://localhost:8000";
下面这个是完整的案例
这里说明一下axios是可以下载安装到电脑 也可以引用cnd,大家可以选择自己方式。
我这里调试的地址是自己搭建的一个服务器地址,大家用的时候可以改成自己的地址,如果没有自己的地址也可以搭建一个,
如果不会搭建大家可以看我前面的笔记Express框架的简单使用。
<button>GET</button>
<button>POST</button>
<button>AJAX</button>
<script>
const btns = document.querySelectorAll("button");
//baseURL是对路径的一个简化
//配置baseURL
axios.defaults.baseURL = "http://localhost:8000";
btns[0].onclick = function(){
//GET请求
// axios.get()
axios.get('/axios',{
//参数
params:{
id:100,
vip:9
}
// //请求头信息
// headers:{
// name:'at-lili'
// }
}).then(re =>{
console.log(re);
})
}
btns[1].onclick = function(){
axios.post('/axios',{
params:{
id: 007,
vip:225
},
//请求头
Headers:{
height:186,
wight:90
},
//请求体
data:{
user:'admin',
pass:'admin'
}
})
}
</script>
Ajax_axios发送ajax请求的更多相关文章
- 在发送ajax请求时加时间戳或者随机数去除js缓存
在发送ajax请求的时候,为了保证每次的都与服务器交互,就要传递一个参数每次都不一样,这里就用了时间戳 大家在系统开发中都可能会在js中用到ajax或者dwr,因为IE的缓存,使得我们在填入相同的值的 ...
- 原生js发送ajax请求
堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
- jQuery发送ajax请求
利用jquery发送ajax请求的几个模板代码. $.ajax({ async : false, type: 'POST', dataType : "json", url: &qu ...
- JQuery发送ajax请求不能用数组作为参数
JQuery发送ajax请求不能用数组作为参数,否则会接收不到参数, 一.js代码如下: $('#delete-button').click(function(){ var select ...
- js中使用队列发送ajax请求
最近,项目中需要按照先后顺序发送ajax请求,并且在一次请求结束后才能发起下一次,不然就会导致逻辑错误. 解决办法是定义一个数组,保存ajax请求数据. 以下使用extjs4定义一个类 Ext.def ...
- IE6下a标签上发送ajax请求总是error
IE6下真是处处是坑啊!!!走过了一个又一个坑,记录一下吧. 之前不知道a标签上注册click事件之后,发送ajax请求总是error.后来经过几番网上搜索,终于找到高人遇到此坑的解决办法.原来是a标 ...
- Jquery发送ajax请求以及datatype参数为text/JSON方式
Jquery发送ajax请求以及datatype参数为text/JSON方式 1.方式一:datatype:'text' 2.方式二:datatype:'JSON' 3.使用gson-1.5.jar包 ...
- 【liferay】1、使用alloy-UI发送ajax请求
1.首先liferay要发送ajax请求,那么就需要在jsp中定义resourceURL <portlet:resourceURL var="workDeal" id=&qu ...
- Axios发送AJAX请求
目录 Axios 特征 axios提供主要三种发起请求的方式 方式一:直接axios实例直接call方式 方式二:通过axios实例提供的不同http请求方式的方法 方式三:其实是从第二种方式中单独提 ...
随机推荐
- 云小课|DGC数据开发之基础入门篇
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:欢迎来到DGC数据 ...
- 雨课堂自动切换PPT代码
浏览器运行js步骤 原仓库 Podium = {}; Podium.keydown = function(k) { var oEvent = document.createEvent('Keyboar ...
- Centos7使用Docker启动elasticsearch服务秒退
首先查看docker启动日志 docker logs -f 容器id 查看报错信息 OpenJDK 64-Bit Server VM warning: Option UseConcMarkSweepG ...
- 【LeetCode】98. Validate Binary Search Tree 解题报告(Python & C++ & Java)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 BST的中序遍历是有序的 日期 题目地址:ht ...
- 【LeetCode】859. Buddy Strings 解题报告(Python & C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 字典 日期 题目地址:https://leetcod ...
- HDU 6470:Count(矩阵快速幂)
Count Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submi ...
- Codeforces 849A:Odds and Ends(思维)
A. Odds and Ends Where do odds begin, and where do they end? Where does hope emerge, and will they e ...
- Spring中的@Bean注解
@Bean 基础概念 @Bean:Spring的@Bean注解用于告诉方法,产生一个Bean对象,然后这个Bean对象交给Spring管理.产生这个Bean对象的方法Spring只会调用一次,随后这个 ...
- 【Web前端】css属性cursor注意事项
注意使用cursor的url时url的括号后面必须+ ,auto: 错误示范:cursor:url('../picture/head.cur'); 正确示范:cursor: url(". ...
- CS5211替代兼容PS8625|普瑞PS8625替代方案|CapstoneCS5211
PS8625是一个DP显示端口 到LVDS转换器芯片,利用GPU和显示端口(DP) 或嵌入式显示端口(eDP) 输出和接受LVDS输入的显示面板.PS8625实现双通道DP输入,双链路LVDS输出.P ...