Vue之交互
1.get（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{ },
methods:{
get:function(){
this.$http.get('a.txt').then(function(res){
alert(res.data);
},function(res){
alert(res.data);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
描述：
使用this.$http.get('数据来源的文件').then(function(res){
//成功
alert(res.data)//文件中的数据
},function(res){
//失败
alert(res.status);//返回状态：0
})
2.使用带参数的数据文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{ },
methods:{
get:function(){
this.$http.get('get.php',{
a:1,
b:2
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
get.php文件中
<?php
$a=$_GET['a'];
$b=$_GET['b'];
echo $a+$b;
?>
结果：
输出 3
3.使用post(带参数)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{ },
methods:{
get:function(){
this.$http.post('post.php',{
a:1,
b:20
},{
emulateJSON:true
}).then(function(res){
alert(res.data);
},function(res){
alert(res.status);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
描述：
emulateJSON:true
如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。
启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。
4.使用jsonp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{ },
methods:{
get:function(){
this.$http.jsonp('https://sug.so.360.cn/suggest',{
word:'a'
}).then(function(res){
alert(res.data.s);
},function(res){
alert(res.status);
});
}
}
});
};
</script>
</head>
<body>
<input type="button" value="按钮" @click="get()">
</body>
</html>
Vue之交互的更多相关文章
- 第4章-Vue.js 交互及实例的生命周期
一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...
- vue的交互
交互 Vue做交互需要引入一个库:vue-resouce.js get: post jsonp <script src="vue.js" ...
- Vue数据交互
注意:本地json文件必须放在static目录下面,读取或交互数据前,请先安装vue-resource.点击前往 -->(vue-resource中文文档) 一.Vue读取本地JSON数据 c ...
- 11.vue 数据交互
vue new Vue({ el,选择器 string/obj 不能选择html/body data, methods, template string/obj //生命周期 -- 虚拟DOM 1.初 ...
- 第5章-Vue.js交互及生命周期练习
一.学习目标 使用网络请求进行前后端交互 (重点) 理解钩子函数的作用 (难点) 掌握Vue.js过滤器的使用方法 了解Vue.js事件的深入用法 (重点) 二.仿写留言板 2.1.实现" ...
- 常用vue请求交互数据方式
几种 vue的数据交互形式 var that=this get请求 that.$http.get("1.txt").then(function(result){ console.l ...
- Vue 前后台交互，插件
目录 Vuex 插件 前端存储数据汇总 前后台交互方式(重点) axios 插件 同源策略-跨域问题 前后台分离项目交互流程 异步请求细节 Element-ui 插件 jQ + Bs插件 Django ...
- 05 . Vue前端交互,fetch,axios,以asyncawait方式调用接口使用及案例
目标 /* 1. 说出什么是前后端交互模式 2. 说出Promise的相关概念和用法 3. 使用fetch进行接口调用 4. 使用axios进行接口调用 5. 使用asynnc/await方式调用接口 ...
- vue接口交互写死的
vue接口 写死的 RoleOfUserOrgRef: function ({ commit }, param) { return new Promise((resolve) => { $axi ...
- vue 后台交互数据-编辑页面
思路~点击编辑按钮,需要获取当前列的id,然后根据id请求后台当前id的数据 1.~~ 2.接收id,并请求页面 获取数据
随机推荐
- 【转载】Linux虚拟化KVM-Qemu分析（十）之virtio驱动
原文信息 作者:LoyenWang 出处:https://www.cnblogs.com/LoyenWang/ 公众号:LoyenWang 版权:本文版权归作者和博客园共有 转载:欢迎转载,但未经作者 ...
- switch写法详解
我们在开发项目中经常遇到对数据的判断进行相应的逻辑(if..else ,三元运算等),Switch 语句用来选择多个需要执行的代码块 ,一定程度上简化了if....else 1. 语法 switch ...
- 单节点kafka部署笔记
1 背景 因为工作中需要对接kafka,准备在测试环境中自己部署一套,考虑方便决定部署一台单点. 2 部署 2.1 scala 2.1.1 java环境 openjdk即可,我使用的是openjdk1 ...
- happens-before 原则
happens-before 简述 从 JDK 5 开始,Java 使用新的 JSR-133 内存模型.JSR-133 使用 happens-before 的概念来阐述操作之间的内存可见性.在 JMM ...
- iframe与主窗口通信
1. 引言 <iframe> 元素是 HTML 中的一个标签,用于在当前页面中嵌入另一个页面 使用 <iframe> 可以实现以下功能: 嵌入其他网页:可以将其他网页嵌入到当前 ...
- Linux-用户管理命令（必须是超级管理员-root）
useradd [名字] 创建一个新用户 (home 下创建) useradd -d [路径][名字] 路径中的名字是文件 , 登录用的后面的名字 passwd [用户名] 设置密码, ...
- 天地图三维帮助文档(Cesium)
https://blog.csdn.net/Tmraz/article/details/114977652
- 论文解读（Moka‑ADA）《Moka‑ADA: adversarial domain adaptation with model‑oriented knowledge adaptation for cross‑domain sentiment analysis》
Note:[ wechat:Y466551 | 可加勿骚扰,付费咨询 ] 论文信息 论文标题:Moka‑ADA: adversarial domain adaptation with model‑o ...
- json虽然简单，但这些细节你未必知道
基本介绍 JSON的全称是JavaScript Object Notation,它并不是编程语言,而是一种可以在服务器和客户端之间传输的数据格式,本来是JavaScript的子集,但现在已独立存在于各 ...
- BUUCTF-RE-[BJDCTF2020]BJD hamburger competition
啊这,点进去康康 dnspy反编译的题,https://www.52pojie.cn/thread-495115-1-1.html 里面有详细介绍 然后文件很多,我不知道找哪一个下手 看其他师傅的wp ...