vue 发送ajax请求

一、简介

　　1、vue本身不支持发送AJAX请求，需要使用vue-resource（vue1.0版本）、axios（vue2.0版本）等插件实现

　　2、axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护

　　3、参考：GitHub上搜索axios，查看API文档

二、使用axios发送AJAX请求

　　1、安装axios并引入

　　　　1、npm install axios -S #直接下载axios组件，下载完毕后axios.js就存放在node_modules\axios\dist中

　　　　 2、网上直接下载axios.min.js文件

　　　　 3、通过script src的方式进行文件的引入

　　2、发送get请求

　　　　1、基本使用格式

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

　　　　　　格式2：axios.get(url[,options]);

　　　　2、传参方式：
　　通过url传参
　通过params选项传参

　　　　3、案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>发送AJAX请求</title><script src="js/vue.js"></script><script src="js/axios.min.js"></script><script>window.onload=function(){new Vue({el:'#itany',data:{user:{name:'alice',age:19},},methods:{send(){axios({method:'get',url:'http://www.baidu.com?name=tom&age=23'}).then(function(resp){console.log(resp.data);}).catch(resp => {console.log('请求失败：'+resp.status+','+resp.statusText);});},sendGet(){axios.get('server.php',{params:{name:'alice',age:19}}).then(resp => {console.log(resp.data);}).catch(err => {             //
                            console.log('请求失败：'+err.status+','+err.statusText);});},}});}</script>
</head>
<body><div id="itany"><button @click="send">发送AJAX请求</button><button @click="sendGet">GET方式发送AJAX请求</button></div>
</body>
</html>

View Code

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

　　　　1、基本使用格式

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

　　　　2、传参方式

　　　　　　1、自己拼接为键值对

　　　　　　2、使用transformRequest，在请求发送前将请求数据进行转换

　　　　　　3、如果使用模块化开发，可以使用qs模块进行转换

　　　　　　4、注释：axios默认发送post数据时，数据格式是Request Payload，并非我们常用的Form Data格式，所以参数必须要以键值对形式传递，不能以json形式传参

　　　　3、案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>发送AJAX请求</title><script src="js/vue.js"></script><script src="js/axios.min.js"></script><script>window.onload=function(){new Vue({el:'#itany',data:{user:{name:'alice',age:19},},methods:{sendPost(){// axios.post('server.php',{//         name:'alice',//         age:19// }) //该方式发送数据是一个Request Payload的数据格式，一般的数据格式是Form Data格式，所有发送不出去数据// axios.post('server.php','name=alice&age=20&') //方式1通过字符串的方式发送数据
                        axios.post('server.php',this.user,{  //方式2通过transformRequest方法发送数据，本质还是将数据拼接成字符串
                            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>
</head>
<body><div id="itany"><button @click="send">发送AJAX请求</button><button @click="sendGet">GET方式发送AJAX请求</button></div>
</body>
</html>

View Code

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

　　　　2、使用vue-resource发送跨域请求

　　　　3、安装vue-resource并引入

　　　　　　　npm info vue-resource #查看vue-resource 版本信息
　　　　　　 cnpm install vue-resource -S #等同于cnpm install vue-resource -save

　　　　4、基本使用方法（使用this.$http发送请求）

　　　　　　 this.$http.get(url, [options])

　　　　　　 this.$http.head(url, [options])

　　　　　　 this.$http.delete(url, [options])

　　　　　　this.$http.jsonp(url, [options])

　　　　　　 this.$http.post(url, [body], [options])

　　　　　　this.$http.put(url, [body], [options])

　　　　　　this.$http.patch(url, [body], [options])

　　　　5、案例

基本发送方式1

<!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"><title>发送AJAX请求</title><script src="js/vue.js"></script><script src="js/axios.js"></script><script src="js/vue-resource.js"></script>
</head><body>
<div id="itany"><a>{{name}}</a><button v-on:click="send">sendJSONP</button></div>
</body>
<script>new Vue({el: '#itany',data:{name: 'alice',age: 19},methods:{send:function(){
//                https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=athis.$http.jsonp('https://sug.so.360.cn/suggest',{params:{word:'a'}}).then(function (resp) {console.log(resp.data)})}}})
</script>
</html>

View Code

基本发送方式2

<!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"><title>发送AJAX请求</title><script src="js/vue.js"></script><script src="js/axios.js"></script><script src="js/vue-resource.js"></script>
</head><body>
<div id="itany"><a>{{name}}</a><button v-on:click="send">sendJSONP</button></div>
</body>
<script>new Vue({el: '#itany',data:{name: 'alice',age: 19},methods:{send:function(){
//                https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=athis.$http.jsonp('https://sug.so.360.cn/suggest',{params:{word:'a'}}).then(resp=> {console.log(resp.data)})}}})
</script>
</html>

View Code

带jsonp参数方式

<!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"><title>发送AJAX请求</title><script src="js/vue.js"></script><script src="js/axios.js"></script><script src="js/vue-resource.js"></script>
</head>
<body>
<div id="itany"><button v-on:click="send">向百度搜索发送JSONP请求</button>
</div>
</body>
<script>new Vue({el:'#itany',data:{name:'za'},methods:{send:function () {this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{params:{wd:'a'},jsonp:'cb', //百度使用的jsonp参数名为cb，所以需要修改,默认使用的是callbakc参数就不用修改
                    }).then(function (resp) {console.log(resp.data)}).catch(function (err) {console.log(err)})}}})
</script>
</html>

View Code

vue 发送ajax请求相关推荐

Vue之axios发送Ajax请求
2.10 axios发送ajax请求 axios github 2.10.1 准备工程创建一个django工程,例如 login.创建完成之后,再创建一个子应用,例如users.最后再设置一下模板文 ...
promise的应用和在VUE中使用axios发送AJAX请求服务器
promise 用promise对函数封装: 原来的代码: <!DOCTYPE html> <html> <head><title>vue demo&l ...
六十五、vue生命周期和发送Ajax请求
vue生命周期和发送Ajax请求一 vue生命周期介绍二 vue生命周期钩子函数三测试三发送Ajax请求四计算属性五监听属性一 vue生命周期介绍每个 Vue 实例在被创建时都 ...
二、Vue（发送AJAX请求、Vue生命周期、计算属性、属性和方法、自定义指令、过渡(动画)）
一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用 ...
使用rest_framework写api接口的一些注意事项(axios发送ajax请求)
1. 类继承GenericAPIView,定义queryset 印象深刻的事: 由于原来对于继承关系不太清楚,写接口 APIView/泛指GenericAPIView不太关注queryset 没有设置 ...
tab 触发ajax请求,防止重复发送ajax请求的思索
原标题:防止重复发送ajax请求的思索防止重复发ajax请求是平时开发中遇到频次较高的问题了.我通常解决方案有如下几种, 1.UI限制点击完按钮后,就禁用按钮, 并开启显示等待动画,收到服务器的成 ...
发起一个ajax请求,发送ajax请求
发送ajax请求 vue本身不支持发送ajax请求,需要使用vue-resourc axios等插件实现,建议使用axios axios是一个基于promise的http请求客户端,用来发送请求基本 ...
Vuejs发送Ajax请求
一.概况 ①vuejs中没有内置任何ajax请求方法 ②在vue1.0版本,使用的插件 vue resource 来发送请求,支持promise ③在vue2.0版本,使用社区的一个第三方库 axio ...
React基础-React中发送Ajax请求以及Mock数据
前言在 React 中, render 函数返回的结果,取决于组件的 props 和 state 我们都知道 UI 页面上的数据不是写死的,往往是从后端的数据接口中拿到的然后将真实的数据填充到页面 ...

vue 发送ajax请求

vue 发送ajax请求相关推荐

最新文章

热门文章