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,并请求页面 获取数据
随机推荐
- 与 AI 同行，利用 ChatGLM 构建知识图谱
大家好,我是东方财富的一名算法工程师,这里分享一些利用大模型赋能知识图谱建设的一些实践. 为什么知识图谱需要大模型 在金融场景中,天然会有大量结构化的数据需要投入大量的人力去生产和维护,而这样的数据又 ...
- Day06_Java_作业
A:简答题 1. 类是什么? 对象是什么?举例说明 2. 类由哪些内容组成? 3. 成员变量与局部变量的区别? 4. 什么是匿名对象?什么时候使用匿名对象? 5. 使用面向对象[封装]的好处有哪些? ...
- [TSG开发日志4]算法组件、个人编写的库文件如何封装成DLL，如何更好地对接软件开发？
写在前面 这个内容确实是我有点疏忽了,我以为做算法的同事应该多少对这方面会有点了解的.但是我想了一下我刚毕业的时候,确实对这方面的理解不深,查了很多资料才勉强搞懂什么意思,也是后来随着工程学习的愈加深 ...
- centos7安装weblogic
前言 简介:weblogic是java应用服务器软件的一种,类似于tomcat,但功能更多,适用于大型应用场景. 版本: 系统:centos 7(最小化安装,无图形化界面) jdk: oraclejd ...
- 深入浅出 Typescript
TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准(ES6 教程). TypeScript 由微软开发的自由和开源的编程语言. TypeScript 设计 ...
- 网络请求-Android篇(Okhttp和Retrofit)
一.OkHttp的介绍和基本用法 OkHttp是一个流行的开源Java和Android应用程序的HTTP客户端.它由Square Inc.开发,提供了一种简单高效的方式来进行应用程序中的HTTP请求. ...
- Docker部署cas
一.首先安装cas镜像 1.拉取cas docker镜像 docker pull apereo/cas 2.启动容器: docker run --name cas -p 8443:8443 -p 8 ...
- 第2章 Git安装
兄弟,恭喜你,刷到这篇超详细安装GIt教程,就让Codeyang带你一步一步的安装Git!~~ Git官网地址: https://git-scm.com/ 查看 GNU 协议,可以直接点击下一步. 选 ...
- Seata AT和XA模式
一.分布式事务产生得原因: 1.1.数据库分库分表 当数据库单表一年产生的数据超过1000W,那么就要考虑分库分表,具体分库分表的原理在此不做解释,以后有空详细说,简单的说就是原来的一个数据库变成了多 ...
- 【规范】SpringBoot接口返回结果及异常统一处理，这样封装才优雅
前言 缘由 博友的需求就是我最大的动力 博友一说话,本狗笑哈哈.博友要我写啥,我就写啥. 特来一篇关于SpringBoot接口返回结果及异常统一处理,虽说封不封装都能用,但咱后端也得给前端小姐姐留个好 ...