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年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
随机推荐
- python之 MySQLdb 实践 爬一爬号码
0.目录 2.构建URL3.新建数据库4.新建汇总表5.定义连接数据库函数:connect_db(db=None, cursorclass=DictCursor)6.汇总表填充必要数据7.新建各省份子 ...
- 12px以下字体显示问题
刚接到广告公司出的设计稿,里面很多内容均是12px以下得字体,现在来总结一下解决办法,方便以后使用 1.使用png图片 但是会影响页面响应速度 2.使用transform: scale(0.x); 注 ...
- python对象、引用
1.python对象 python中 所有的python对象都有3个特征: 身份,类型和值 身份: 每个对象有一个唯一的身份标识自己,这个值可以被认为是该对象内存地址.id()查看. 类型 type( ...
- 2018牛客网暑假ACM多校训练赛（第五场）H subseq 树状数组
原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round5-H.html 题目传送门 - https://www.no ...
- 2018牛客网暑假ACM多校训练赛（第四场）C Chiaki Sequence Reloaded (组合+计数) 或 数位dp
原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round4-C.html 题目传送门 - https://www.no ...
- Practice| 面向对象
实参与形参的传递机制 * 实参给形参赋值: * 1.基本数据类型: * 实参给形参的数据值,形参的修改和实参无关 * 2.引用数据类型 * 实参给形参的地址值,如果这个地址值修改“属性”会影响实参,但 ...
- 最接近的三数之和(给定一个包括 n 个整数的数组 nums 和 一个目标值 target。找出 nums 中的三个整数， 使得它们的和与 target 最接近。返回这三个数的和)
例如,给定数组 nums = [-1,2,1,-4], 和 target = 1. 与 target 最接近的三个数的和为 2. (-1 + 2 + 1 = 2). 思路:首先对数组进行排序 ...
- 最短路（bellman）-hdu2066
题目链接:https://vjudge.net/problem/HDU-2066 题目描述: 代码实现: #include <cstdio> #include <cstring> ...
- JAVA基础中的注意点（一）
1.标识符 标识符:标识某些事物用于区分的符号. (即区分某些事物的符号) 四条硬性规定: a.不能是 关键字.true.false.null. b.可以包含 字母.数字(0-9).下划线(_)或美 ...
- hdu 3001 Travelling （三进制）【状压dp】
<题目链接> 题目大意: 给出n个点和m条边,求经过所有点所需的最小花费,每个点最多经过两次. 解题分析: TSP问题类型,由于此题每个点有三种状态,所以采用三进制状态压缩,0.1.2 分 ...