Vue（七）发送Ajax请求
- 2.1 安装axios并引入
- 2.2 基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title> <script src="https://unpkg.com/vue"></script>
<script src="axios/axios.min.js"></script>
<script> window.onload=function(){
let app = new Vue({
el:'.container',
data:{
users:{
name:'Maria',
age:18
},
GitUsers:{},
uid:'Somnusy'
},
methods:{
send(){
axios({
method:"get",
url:"json/user.json"
}).then(response => {
console.log('发送Ajax请求,请求成功',response.data);
}).catch(response => {
console.log('发送Ajax请求,请求失败',response);
})
},
//GET
sendGet(){
//传参 两种方式
/* axios.get('server/server.php?name=Tom&age=23') */ //通过url传参
axios.get('server/server-get.php',{ //通过params选项传参
params:{
name:'Jan',
age:18
}
})
.then(response => {
console.log('get发送Ajax请求,请求成功',response.data)
})
.catch(response => {
console.log('get发送Ajax请求,请求失败',response)
})
},
//POST
sendPost(){
//axios.post('server/server-post.php','name=Alex&age=26') //1.自己拼接为键值对
axios.post('server/server-post.php',this.users,{ //2.使用transformRequest，在请求发送前将请求数据进行转换
transformRequest:[
function(data){
let params='';
for(let index in data){
params+=index+'='+data[index]+'&'
}
return params;
}
]
})
.then(response => {
console.log('post发送Ajax请求,请求成功',response.data)
})
.catch(response => {
console.log('post发送Ajax请求,请求失败',response)
})
}, getUserById(uid){
axios.get('https://api.github.com/users/'+uid).then(response => {
console.log(response.data);
this.GitUsers=response.data;
}).catch(response=>{
console.log('请求失败');
})
}
}
})
} </script> </head> <body> <div class="container">
<button v-on:click='send'>发送Ajax请求</button>
<button v-on:click='sendGet'>get发送Ajax请求</button>
<button v-on:click='sendPost'>post发送Ajax请求</button> <br>
<br>
<hr>
<br>
<br>
<!-- 获取GitHub账号的信息-->
GitHub ID : <input type="text" v-model="uid">
<br>
<br>
<button v-on:click="getUserById(uid)">获取GitHub账户信息并显示</button>
<p>用户信息</p>
<p>姓名:{{GitUsers.login}}</p>
<p>头像: <img :src="GitUsers.avatar_url" alt=""></p>
</div> </body> </html>
Vue（七）发送Ajax请求的更多相关文章
- Vue中发送ajax请求——axios使用详解
axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 htt ...
- vue 发送ajax请求
一. 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客 ...
- Vue中使用axios发送ajax请求
作为前后端交互的重要技巧--发送ajax请求,在Vue中我们使用axio来完成这一需求: 首先是下载axios的依赖, npm install --save axios vue-axios 然后在ma ...
- Vuejs发送Ajax请求
一.概况 ①vuejs中没有内置任何ajax请求方法 ②在vue1.0版本,使用的插件 vue resource 来发送请求,支持promise ③在vue2.0版本,使用社区的一个第三方库 axio ...
- Vue.js之Ajax请求
Vue.js同React.Angular,可以说号称前端三巨头. 前段时间,有个哥们说,Vue.js现在出2.0版本了.可是我现在还是在用1.0的. Vue.js一直都没有好好系统的学习,包括目前公司 ...
- Vue 中使用Ajax请求
Vue 项目中常用的 2 个 ajax 库 (一)vue-resource vue 插件, 非官方库,vue1.x 使用广泛 vue-resource 的使用 在线文档 https://githu ...
- 七、Ajax请求
七.Ajax请求 客户端(浏览器)向服务端发起请求的形式: 地址栏:GET 超链接标签:GET form表单:GET或POST Ajax(重要):GET或POST或PUT或DELETE AJAX(As ...
- 在发送ajax请求时加时间戳或者随机数去除js缓存
在发送ajax请求的时候,为了保证每次的都与服务器交互,就要传递一个参数每次都不一样,这里就用了时间戳 大家在系统开发中都可能会在js中用到ajax或者dwr,因为IE的缓存,使得我们在填入相同的值的 ...
- 原生js发送ajax请求
堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
随机推荐
- PyTorch中的backward [转]
转自:https://sherlockliao.github.io/2017/07/10/backward/ backward只能被应用在一个标量上,也就是一个一维tensor,或者传入跟变量相关的梯 ...
- Java基础知识➣序列化与反序列化（四）
概述 Java 提供了一种对象序列化的机制,该机制中,一个对象可以被表示为一个字节序列,该字节序列包括该对象的数据.有关对象的类型的信息和存储在对象中数据的类型. 将序列化对象写入文件之后,可以从文件 ...
- 最长k可重区间集问题&&最长k可重线段集问题
题解: 洛谷上这两题的题意都是有问题的 按照标程题意不应该是开区间而是左开右闭区间 然后连边比较巧妙 我们可以看成选k条不相交的路径,其中i-i+1中有k条边 所以建图i-i+1流量为k,权值为0 l ...
- ANGULAR6.x - 错误随笔 - Can't bind to 'formGroup'
formGroup:错误 Can't bind to 'formGroup' since it isn't a known property of 'form'. (" 原因: 在使用for ...
- [转]解决-Dmaven.multiModuleProjectDirectory system property is not set. Check $M2_HOME environment variable and mvn script match.
来源:http://www.cnblogs.com/sprinng/p/5141233.html 1.添加M2_HOME的环境变量 2.Preference->Java->Installe ...
- C语言之字符、整数、数组、字符串笔记
菜单导航 1.变量在计算中的内存分配 2.字符char类型操作 3.整型数据类型操作 4.数组操作和元素地址分配分析 5.数组越界造成的访问不属于自己的内存空间现象 6.引用数据类型和基本数据类型,形 ...
- windows server 2008性能测试出现大量time_wait
netstat -an | find "TCP" /C netstat -an | find "TIME_WAIT" /C taskkill /im mmdrv ...
- Codeforces 666E E - Forensic Examination SA + 莫队 + 线段树
E - Forensic Examination 我也不知道为什么这个复杂度能过, 而且跑得还挺快, 数据比较水? 在sa上二分出上下界, 然后莫队 + 线段树维护区间众数. #include< ...
- Codeforces 865C Gotta Go Fast 二分 + 期望dp (看题解)
第一次看到这种骚东西, 期望还能二分的啊??? 因为存在重置的操作, 所以我们再dp的过程中有环存在. 为了消除环的影响, 我们二分dp[ 0 ][ 0 ]的值, 与通过dp得出的dp[ 0 ][ 0 ...
- hive有关函数
1.窗口函数2015年4月份购买过的顾客及总人数 select distinct name,count(1) over() as cnt from test_window_yfwhere substr ...