Vue框架axios请求（类似于ajax请求）
Vue框架axios get请求（类似于ajax请求）
首先介绍下，这个axios请求最明显的地方，通过这个请求进行提交的时候页面不会刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script src="axios.js"></script>
</head>
<body>
<div id="myapp">
<input type="button" v-on:click="showlist" value="点我">
<ul>
<li v-for="item in stulist">
代码：{{ item.cityCode}}
城市：{{ item.cityName}}
</li>
</ul>
</div>
</body>
<script>
new Vue({
el:'#myapp',
data:{
stulist:[]
},
methods:{
showlist:function () {
url="./hotcity.json"; 这是一个自定义的json数据文件
var self = this;
axios.get(url)
.then(function (response) {
self.stulist = response.data.data.hotCity;
console.log(response)
.catch(function (err) { })
}) }
}
})
</script>
</html>
Vue框架axios post请求（类似于ajax请求）
这个查看数据使用get请求，但是添加数据的时候如果使用get请求的话，需要添加的数据就会暴露在url中。所以使用axios中的post请求将数据存放在请求体中
这样用户的数据就会很安全。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script src="axios.js"></script>
</head>
<body>
<div id="myapp">
<input type="text" value="username" v-model="uname">
<input type="text" value="password" v-model="passw">
<input type="button" value="提交" v-on:click="login">
</div>
<script>
new Vue({
el:'#myapp',
data: {
uname:'',
passw:''
},
methods:{
login:function () {
alert(222);
url = "hotcity.json";
axios.post(url,{
name:this.uname,
password:this.passw
},{
"headers":{"Content-Type":"application/x-www-form-urlencoded"} }).then(function (response) {
console.log(response)
if (response.code == 1){
window.location.href = "http://www.baidu.com"
}
}).catch(function (error) { })
}
}
}) </script>
</body>
</html>
Vue框架axios请求（类似于ajax请求）的更多相关文章
- Vue（七）发送Ajax请求
发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue ...
- 关于HTTP请求、Ajax请求，请求的同步和异步
使用了很长时间的Ajax请求了,一直都是在以异步的方式在使用.昨天听了一个讲座涉及到apache server,偶然想到了这Ajax请求和HTTP请求的一些区别和联系,就在网上好好搜了一顿,把搜到的结 ...
- Java过滤器处理Ajax请求，Java拦截器处理Ajax请求，java 判断请求是不是ajax请求
Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,java 判断请求是不是ajax请求 Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 java ...
- vue项目使用axios发送请求让ajax请求头部携带cookie
最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知ax ...
- vue 封装 axios 和 各类的请求，以及引入 .vue 文件中使用
//src 底下建立 api 文件夹 // api 文件夹下建立 request,js 文件,文件内容复制下面这段代码即可 /** * ajax请求配置 */ import axios fro ...
- Vue中使用echarts，ajax请求的远程数据赋值给图表不刷新的问题和解决办法
问题: vue-cli搭建的项目,在mounted钩子函数里面创建echarts图表,本地模拟数据可以正常显示,但是当将ajax请求的远程数据赋值给图表时,图表并不会刷新. 解决办法: 刚开始以为是v ...
- 在springmvc框架中，通过ajax请求，响应至前端的中文显示是?
今天遇到的一个问题,我通过ajax请求去访问控制器,然后通过控制器给我响应了一段json数据,但是里面的中文 在浏览上显示是??,我在web.xml 文件中是设置了编码过滤器的,但是估计这个编码过滤器 ...
- 使用NSURLProtocol和NSURLSession拦截UIWebView的HTTP请求(包括ajax请求)
问题:服务器端有一个网站需要AD认证,整站都开了Basic认证,包括图片,CSS等资源,我在HTTP请求头里面添加认证所需的用户名和密码,传递到服务器端可以认证通过.我在UIWebView的shoul ...
- 如何判断一个请求为ajax请求？
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和XML). ajax的请求头如下: 如上图所示具有“X-Request-With”属性,该 ...
随机推荐
- xlsx导入成--json
这两天遇到大难题了,就是这个 xlsx 导入问题,之前用的xlsx.full.min.js,写的导入,结果不兼容ie浏览器,研究这个也好长时间,网上居然还没有搜到合适的,自己写从xlsx官网上 ...
- nodejs批量导入数据eventproxy（回调函数嵌套解决方案）使用实例
回调函数嵌套解决方案——eventProxy API地址:https://github.com/JacksonTian/eventproxy 1.安装eventproxy 执行npm install ...
- MIP （百度移动网页加速器）
前言:第一次用移动网页加速器,感觉好心情都被弄坏了.确实性能提高了不少,但是限制js,对于一些交互实现都成问题.MIP是Mobile Instant Pages的缩写,指百度移动网页加速器, 是一套应 ...
- 【CSS】 CSS 定位
css 定位和浮动 *******本章大量内容copy自w3school********* 定位对于html界面还是很重要的,因为定位会直接影响到用户的视图.对于css而言,定位也比较灵活. 浮动是一 ...
- 【Python】 闭包&装饰器
python中的函数本身就是对象,所以可以作为参数拿来传递.同时其允许函数的层级嵌套定义,使得灵活性大大增加. 闭包 闭包的定义:将函数的语句块与其运行所需要的环境打包到一起,得到的就是闭包对象.比如 ...
- 斑马ZPL指令加入如换行、回车等控制符的方法
在程序中可能会被过滤掉,直接在指令中加入ASCII对应的16进制字符即可解决改问题, 语法:_十六进制(ASCII) 栗子:hello_0D_0Aworld 换行 扫描结果: hello world
- shiro权限框架（三）
三.身份验证 身份验证,即在应用中谁能证明他就是他本人.一般提供如他们的身份 ID 一些标识信息来表明他就是他本人,如提供身份证,用户名/密码来证明 在 shiro 中,用户需要提供 principa ...
- 【最全】经典排序算法（C语言）
算法复杂度比较: 算法分类 一.直接插入排序 一个插入排序是另一种简单排序,它的思路是:每次从未排好的序列中选出第一个元素插入到已排好的序列中. 它的算法步骤可以大致归纳如下: 从未排好的序列中拿出首 ...
- 常用七大经典排序算法总结(C语言描述)
简介 其中排序算法总结如下: 一.交换排序 交换排序的基本思想都为通过比较两个数的大小,当满足某些条件时对它进行交换从而达到排序的目的. 1.冒泡排序 基本思想:比较相邻的两个数,如果前者比后者大,则 ...
- Git常用命令（一）------ 本地操作
本文总结自廖雪峰的网站. 几个名词: 工作区(Working Directory):电脑里能看到的目录 版本库(Repository):包含暂存区和master 暂存区(Stage):待放入maste ...