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”属性,该 ...
随机推荐
- ------- Tor 源码分析第三部分—— 日志设施与智能链表 --------
------------------------------------------------------------------------------------ init_logging()( ...
- kubernetes关键概念总结
service 每个service对应一个cluster IP,cluster IP对应的服务网段最初是在配置kube-apiserver.kube-controller-manager和kube-p ...
- 修改UI及盒子启动及部分后续操作
服务器操作: 1.配置nfs: # vim /etc/exports /home/nfsroot *(insecure,rw,no_root_squash) mkdir -pv /home/nfsro ...
- python列表操作符
list1=[123,456] list2=[234,234] list1>list2 >>>False#返回False 第一项比较之后直接返回false,第二项不看 #+实现 ...
- 安装VMware workstation遇到的两个问题：安装过程中的DLL问题和安装后打开需要的管理权限问题
1.安装过程中遇到Microsoft runtime DLL安装程序未能完成安装的问题? 在遇到这个问题时不要点击确定,需要在开始菜单中输入%temp%,然后跳转到一个文件夹里,找到后缀为setup的 ...
- python3.X中的循环
获取数字范围: range() 在python3.x中使用range(): >>> list(range(7)) [0, 1, 2, 3, 4, 5, 6] >>> ...
- Java创建线程的三种方式
一.继承Thread类创建线程类 (1)定义Thread类的子类,并重写该类的run方法,该run方法的方法体就代表了线程要完成的任务.因此把run()方法称为执行体. (2)创建Thread子类的实 ...
- 用Python满足满足自己的“小虚荣”
首先声明,学习这个只是为了好玩,只是为了好玩,并不是想用这个弄虚作假,做一些不好的事情!一心想做技术人,自制自治! 我们有时候发布一篇日志,或者是一篇博文,总希望自己的浏览量能高点,这样看起来也倍有面 ...
- 一些琐碎的C/C++知识点
1. C++ 数组作为函数参数 在C/C++中,当数组作为函数的参数进行传递时,数组就自动退化为同类型的指针.(在32位系统中,对任意指针求sizeof结果为4) 2. C++ 中const的用法总结 ...
- mongodb 数据备份与恢复
备份 语法 mongodump -h dbhost -d dbname -o dbdirectory -h:服务器地址,也可以指定端口号 -d:需要备份的数据库名称 -o:备份的数据存放位置,此目录中 ...