vue发送ajax请求详解


Posted in Javascript onOctober 09, 2018

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

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

本文为大家介绍vue使用axios发送AJAX请求

首页安装并引入axios

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

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

3、通过script src的方式进行文件的引入<script src="js/axios.min.js"></script>

axios基本使用方法

发送get请求

1、基本使用格式

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

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

2、传参方式:

通过url传参

通过params选项传参

下面我们来看一个vue发送ajax get请求实例代码

<!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>

发送post请求(push,delete的非get方式的请求都一样)

1、基本使用格式

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

2、传参方式

1、自己拼接为键值对

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

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

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

下面看是一个vue发送ajax post请求实例代码

<!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>

上面我们所介绍的vue发送ajax请求都是在同一域名下进行的也就是同域或者说是同源

那么vue如何发送跨域的ajax请求呢?

vue发送跨域ajax请求

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])

下面再来看两个实例

向360搜索发送数据

<!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=a
        this.$http.jsonp('https://sug.so.360.cn/suggest',
          {params:{
            word:'a'
          }}
        ).then(function (resp) {
          console.log(resp.data)
        })

      }
    }
  })
</script>
</html>

vue发送跨域ajax请求带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>

Vue作为一个没有入侵性的框架并不限制你使用ajax框架

使用了Vue后,ajax部分你可以做如下选择:

1.使用JS原生XHR接口

2.引入JQuery或者Zepto 使用$.ajax();

3.Vue的github上提供了vue-resource插件 :

4.使用 fetch.js

5.自己封装一个ajax库

至于哪种方式适合自己的项目大家可以自行选择

Javascript 相关文章推荐
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
理解javascript模块化
Mar 28 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
在vue中使用image-webpack-loader实例
Nov 12 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 #Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 #Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 #Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 #Javascript
angularJS1 url中携带参数的获取方法
Oct 09 #Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 #Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 #Javascript
You might like
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
Symfony控制层深入详解
2016/03/17 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
2007/04/20 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
vue中v-for通过动态绑定class实现触发效果
2018/12/06 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
Python的lambda匿名函数的简单介绍
2013/04/25 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
pytorch简介
2020/11/11 Python
企业厂长岗位职责
2013/12/17 职场文书
获奖的大学生创业计划书
2014/01/05 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
工程安全生产协议书
2014/11/21 职场文书
营业员岗位职责
2015/02/11 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书