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年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...
随机推荐
- OpenJDK-study-001 windows上安装Mercurial 4.4.1 克隆OPENJDK版本库
下载安装 1.下载Mercurial 进入https://www.mercurial-scm.org/wiki/Mercurial下载,windows上傻瓜式安装的,安装好之后,命令行进入安装目录, ...
- UE4 ShooterGame Demo的开火的代码
之前一直没搞懂按下鼠标左键开火之后,代码的逻辑是怎么走的,今天看懂了之前没看懂的部分,进了一步 ShooterCharacter.cpp void AShooterCharacter::OnStart ...
- 3897: Power
题解: 首先很贪心的选择 有最大的我们一定会用最大的 然后可以将序列分割.. 就变成了一道模拟题了.. 每个状态记录(h,t,h-have,t-need) 注意一下细节就可以了 代码: #includ ...
- python全栈开发day62-两表操作增删改查，外键，if else模板语法
一.今日内容总结: day62 内容回顾: 1. django有关所有命令: pip install django==1.11.14 django-admin startproject 项目名称 cd ...
- Python_生成器generator
生成器:调用时返回一个迭代器 如果一个函数中包含yield语法,那这个函数就会变成一个生成器 例1: def draw_money(draw): #这个函数称为生成器 while draw >0 ...
- mongo 分片
// use ebay // sh.enableSharding("ebay") // db.getCollection("ebay_total_menu_detail_ ...
- Linux centos7安装python3并且不影响python2
一.安装依赖 yum -y groupinstall "Development tools" yum -y install zlib-devel bzip2-devel opens ...
- 009 spring boot中文件的上传与下载
一:任务 1.任务 文件的上传 文件的下载 二:文件的上传 1.新建一个对象 FileInfo.java package com.cao.dto; public class FileInfo { pr ...
- 010 pandas的DataFrame
一:创建 1.通过二维数组进行创建 2.取值 取列,取位置的值 3.切片取值 这个和上面的有些不同,这里先取行,再取列 4.设定列索引 这里使用的行索引与上面不同. 5.通过字典的方式创建 6.索引 ...
- ubuntu中git
1.在ubuntu中安装git $ sudo apt-get install git git-core 2.配置本机的git $ git config --global user.name " ...