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年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
随机推荐
- adb devices unauthorized解决办法
进行Android项目调试时,连接完设备,进行adb install ******.apk时,偶遇 adb devices unauthorized 这个小东西,解决办法:将手机设置->辅助功能 ...
- 【Android】android文件的写入与读取---简单的文本读写context.openFileInput() context.openFileOutput()
最终效果图,点击save会保存到文件中,点击show会从文件中读取出内容并显示. main.xml <?xml version="1.0" encoding="ut ...
- linux重启服务的脚本命令
最近做网站测试,每次测试完成都要重启服务,为此写了一个简单的shell脚本 linux服务重启shell脚本示例 2014年12月18日 linux服务重启脚本,如何实现linux服务的定时重启,可以 ...
- 带你了解zabbix如何监控mysql主从到报警触发
本章博客我们一起来聊一聊如何监控mysql数据库主从状态? 思路梳理: 1)首先我们都知道,判断Mysql主从是否正常,是通过主从上面的SQL和IO线程都为yes状态判断(通过awk取值,grep过滤 ...
- gitlab之五: gitlab之webhook
webhook(网络钩子),一般与jenkins联合使用,gitlab的某个项目的代码更新了后就触发 webhook中配置的 url ,这个url一般是某一个jienkins中某一个job的url.即 ...
- 【python】TCP/IP编程
No1: [TCP] 客户端 import socket s=socket.socket(socket.AF_INET,socket.SOCK_STREAM) s.connect(('www.sina ...
- 大数据技术 - MapReduce 作业的运行机制
前几章我们介绍了 Hadoop 的 MapReduce 和 HDFS 两大组件,内容比较基础,看完后可以写简单的 MR 应用程序,也能够用命令行或 Java API 操作 HDFS.但要对 Hadoo ...
- 拯救者Y720-gtx1050-window10-配置tensorflow-gpu环境
https://www.cnblogs.com/31415926535x/p/10536572.html 概述 因为选修了数字图像这门课,,要做一个人脸识别的项目,和室友打算利用tensorflow来 ...
- Python爬虫:更加优雅的执行JavaScript(PyV8)
https://www.jianshu.com/p/c534d6eb881a?utm_source=oschina-app
- the secrets
prime time productions: my life had collepes arround me? i have worked myselft into exhaustion. my f ...