什么是Ajax
Ajax即Asynchronous JavaScript and XML(异步JavaScript和XML)的缩写
Ajax能够在不重新加载整个页面的情况下与服务器交换数据并更新部分网页
一、使用vue-resource发起ajax请求
Vue要实现异步加载需要使用vue-resource库
引入vue-resource:
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
需要注意的是 vue-resource 依赖于Vue 因此引入的顺序要放在Vue的后面
vue-resource往Vue上面挂载了一个$http
因此 可通过this.$http
来发起请求 例如this.$http.get()
或this.$http.post()
等
通过.then()
获取返回的数据
this.$http.get()/post().then(成功回调函数[必填],失败回调函数[可填])
全部请求:
- get(url, [config])
- head(url, [config])
- delete(url, [config])
- jsonp(url, [config])
- post(url, [body], [config])
- put(url, [body], [config])
- patch(url, [body], [config])
使用例子:
<div id="app">
<input type="button" value="get" @click="getInfo">
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
},
methods:{
getInfo()
{
// 发起get请求
// 通过.then()设置请求成功后的回调函数
this.$http.get