Vuejs发送Ajax请求

一、概况

①vuejs中没有内置任何ajax请求方法

②在vue1.0版本，使用的插件 vue resource 来发送请求，支持promise

③在vue2.0版本，使用社区的一个第三方库 axios ，也支持promise

④在HTML5时代，浏览器增加了一个特殊的异步请求方法 fetch，原生支持promise，由于兼容性问题，一般用于移动端

⑤还有的项目会使用vue和jquery混用，借助jQuery的ajax方法

二、axios库的使用

①安装和引入：

npm直接下载axios组件，下载完毕后axios.js就存放在node_modules\axios\dist中

npm install axios

网上直接下载axios.min.js文件，或者使用cdn，通过script src的方式进行文件的引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

②发送get请求

基本使用格式：

axios([options])        #这种格式直接将所有数据写在options里，options其实是个字典

axios.get(url[,options]);

传参方式：通过url传参，通过params选项传参

案例：

    <div id="app"><button @click='send'>发送Ajax请求</button><button @click='sendGet'>GET方式发送Ajax请求</button></div><script src="node_modules/vue/dist/vue.js"></script><script src="node_modules/axios/dist/axios.min.js"></script><script>new Vue({el:'#app',data:{user:{name:'eric',age:24},},methods:{send(){axios({method:'get',url:'http://www.baidu.com?name=jack&age=30'}).then(function(resp){console.log(resp.data);}).catch(err=>{console.log('请求失败:'+err.status+','+err.statusText);});},sendGet(){axios.get('server.php',{params:{name:'tom',age:20}}).then(resp=>{console.log(resp.data)}).catch(resp=>{console.log('请求失败:'+err.status+','+err.statusText);});},},});</script>

③发送post请求（push,delete的非get方式的请求都一样）

基本使用格式

axios.post(url,data,[options]);

传参方式：自己拼接为键值对；使用transformRequest，在请求发送前将请求数据进行转换；如果使用模块化开发，可以使用qs模块进行转换；
注意：axios默认发送post数据时，数据格式是Request Payload，并非我们常用的Form Data格式，所以参数必须要以键值对形式传递，不能以json形式传参
案例：

    <div id="app"><button @click='sendPost'>post方式发送Ajax请求</button></div><script src="node_modules/vue/dist/vue.js"></script><script src="node_modules/axios/dist/axios.min.js"></script><script>new Vue({el:'#app',data:{user:{name:'eric',age:24},},methods:{sendPost(){axios.post('server.php',this.user,{transformRequest:[function(data){let params='';for(let index in data){params+=index+'='+data[index]+'&';}return params;}]}).then(resp=>{console.log(resp.data)}).catch(err=>{console.log('请求失败:'+err.status+','+err.statusText);});},},});</script>

④发送跨域请求：axios本身并不支持发送跨域的请求，没有提供相应的API，作者也暂没计划在axios添加支持发送跨域请求，所以只能使用第三方库，可以使用vue-resource发送跨域请求

转载于:https://www.cnblogs.com/EricZLin/p/9380406.html

Vuejs发送Ajax请求相关推荐

ajax发送动态字符传,如何发送ajax请求文件与其他字符串的变量？
我想创建ajax调用并发送数据与文件和其他变量,我也使用django,如果它的帮助.如何发送ajax请求文件与其他字符串的变量? 我尝试: js文件: $("#save-new-reques ...
使用rest_framework写api接口的一些注意事项(axios发送ajax请求)
1. 类继承GenericAPIView,定义queryset 印象深刻的事: 由于原来对于继承关系不太清楚,写接口 APIView/泛指GenericAPIView不太关注queryset 没有设置 ...
Vue之axios发送Ajax请求
2.10 axios发送ajax请求 axios github 2.10.1 准备工程创建一个django工程,例如 login.创建完成之后,再创建一个子应用,例如users.最后再设置一下模板文 ...
tab 触发ajax请求,防止重复发送ajax请求的思索
原标题:防止重复发送ajax请求的思索防止重复发ajax请求是平时开发中遇到频次较高的问题了.我通常解决方案有如下几种, 1.UI限制点击完按钮后,就禁用按钮, 并开启显示等待动画,收到服务器的成 ...
前端学axios还是ajax,【Web前端问题】axios发送ajax请求问题？
在程序里借助axios库发送ajax请求,但是失败了,返回这个然而在同一个位置换成jquery的代码却能成功,代码如下,不知axios哪里写的不对??谢谢~ //axios axios.post(& ...
jQuery 发送 AJAX 请求
AJAX 请求状态 xhr.readyState 可以用来查看请求当前的状态参考官方文档的链接:https://developer.mozilla.org/zh-CN/docs/Web/API/XM ...
axios 发送 AJAX请求
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
fetch 发送 AJAX请求
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
发起一个ajax请求,发送ajax请求
发送ajax请求 vue本身不支持发送ajax请求,需要使用vue-resourc axios等插件实现,建议使用axios axios是一个基于promise的http请求客户端,用来发送请求基本 ...

Vuejs发送Ajax请求

一、概况

二、axios库的使用

Vuejs发送Ajax请求相关推荐

最新文章

热门文章