vue.js配合axios发送Ajax请求

vue

vue.js与ajax

vue本身是不支持发送ajax请求，需要通过其他库来实现的（比如vue1.0版本官方推荐的vue-resource、vue2.0版本官方推荐的axios），或者也可以使用jquery来发送ajax请求

本文仅做一个自己的参考...使用axios发送ajax请求

vue2.0版本已经不推荐vue-resurce了，官方推荐axios来发送，首先要先了解的是axios是一个基于Promise的HTTP请求客户端，用来发送请求。

关于Promise的知识，这里不再详细讲解啦。推荐可以去看下阮一峰老师的书《ECMAScript 6 入门》去进行了解。

步骤

1.安装axios，我们先去github，搜索axios

image.png

官方文档下有非常详细的API,这里我们就通过直接引入的方式来使用。

通过get方法请求

get.html

    
    
    
    
    


    

        
        
        发送get请求
    
    

界面效果如图，我就偷懒不写样式了...

image.png

写个最简单的php响应后输出 get.php

输入名字和年龄，就直接请求并输入数据了

image.png

image.png

通过post请求

同样post.html

    
    
    
    
    


    

        
        
        发送get请求
    
    

同样post.php

image.png

image.png

但是确实很怪异的行为就是，我明明按照官网的api写的，居然没有获取到name和age，通过查找资料得知，这种方式传递的数据是Request Payload。所以需要做些小处理，当然啦，个人观点，这也是官方文档还没更新解决的一些小问题吧

image.png

还好，官方文档提供了一个参数可以对传递参数进行转换，具体如下
post.html改

    
    
    
    
    


    

        
        
        发送get请求
    
    

image.png

image.png

上面都是在没有跨域的情况下进行ajax请求的，如果我们要跨域请求呢？
跨域请求的话axios还没有解决方案，当时，可以通过vue-resource的jonsp来实现，vue-resource虽然在vue2.0版本官方不推荐，但是也是可以用的，具体看项目需求了

使用vue-resource跨域请求的一个例子

    
    
    
    
    


    

        
        获取github的账户信息
    
    
{{k}}:{{v}}
    

image.png

典型的跨域请求例子输入姓名即可查询在github上面的信息。
有需要的可以去下载源码
欢迎访问我的个人网站zhengyepan.com
欢迎讨论交流~