1.get（）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>  
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script src="vue-resource.js"></script>
  14.     <script>
  15.         window.onload=function(){
  16.             new Vue({
  17.                 el:'body',
  18.                 data:{  
  19.  
  20.                 },
  21.                 methods:{
  22.                     get:function(){
  23.                         this.$http.get('a.txt').then(function(res){
  24.                             alert(res.data);
  25.                         },function(res){
  26.                             alert(res.data);
  27.                         });
  28.                     }
  29.                 }
  30.             });
  31.         };
  32.     </script>
  33. </head>
  34. <body>
  35.     <input type="button" value="按钮" @click="get()">
  36. </body>
  37. </html>

描述：

使用this.$http.get('数据来源的文件').then(function(res){

//成功

alert(res.data)//文件中的数据

},function(res){

//失败
alert(res.status);//返回状态：0

})

2.使用带参数的数据文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>  
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script src="vue-resource.js"></script>
  14.     <script>
  15.         window.onload=function(){
  16.             new Vue({
  17.                 el:'body',
  18.                 data:{  
  19.  
  20.                 },
  21.                 methods:{
  22.                     get:function(){
  23.                         this.$http.get('get.php',{
  24.                             a:1,
  25.                             b:2
  26.                         }).then(function(res){
  27.                             alert(res.data);
  28.                         },function(res){
  29.                             alert(res.status);
  30.                         });
  31.                     }
  32.                 }
  33.             });
  34.         };
  35.     </script>
  36. </head>
  37. <body>
  38.     <input type="button" value="按钮" @click="get()">
  39. </body>
  40. </html>

get.php文件中

  1. <?php
  2. $a=$_GET['a'];
  3. $b=$_GET['b'];
  4. echo $a+$b;
  5. ?>

结果：

输出 3

3.使用post(带参数)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>  
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script src="vue-resource.js"></script>
  14.     <script>
  15.         window.onload=function(){
  16.             new Vue({
  17.                 el:'body',
  18.                 data:{  
  19.  
  20.                 },
  21.                 methods:{
  22.                     get:function(){
  23.                         this.$http.post('post.php',{
  24.                             a:1,
  25.                             b:20
  26.                         },{
  27.                             emulateJSON:true
  28.                         }).then(function(res){
  29.                             alert(res.data);
  30.                         },function(res){
  31.                             alert(res.status);
  32.                         });
  33.                     }
  34.                 }
  35.             });
  36.         };
  37.     </script>
  38. </head>
  39. <body>
  40.     <input type="button" value="按钮" @click="get()">
  41. </body>
  42. </html>

描述：

emulateJSON:true

如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。

启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。

4.使用jsonp

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <style>  
  10.  
  11.     </style>
  12.     <script src="vue.js"></script>
  13.     <script src="vue-resource.js"></script>
  14.     <script>
  15.         window.onload=function(){
  16.             new Vue({
  17.                 el:'body',
  18.                 data:{  
  19.  
  20.                 },
  21.                 methods:{
  22.                     get:function(){
  23.                         this.$http.jsonp('https://sug.so.360.cn/suggest',{
  24.                             word:'a'
  25.                         }).then(function(res){
  26.                             alert(res.data.s);
  27.                         },function(res){
  28.                             alert(res.status);
  29.                         });
  30.                     }
  31.                 }
  32.             });
  33.         };
  34.     </script>
  35. </head>
  36. <body>
  37.     <input type="button" value="按钮" @click="get()">
  38. </body>
  39. </html>

Vue之交互的更多相关文章

  1. 第4章-Vue.js 交互及实例的生命周期

    一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...

  2. vue的交互

    交互     Vue做交互需要引入一个库:vue-resouce.js     get:      post     jsonp   <script src="vue.js" ...

  3. Vue数据交互

    注意:本地json文件必须放在static目录下面,读取或交互数据前,请先安装vue-resource.点击前往  -->(vue-resource中文文档) 一.Vue读取本地JSON数据 c ...

  4. 11.vue 数据交互

    vue new Vue({ el,选择器 string/obj 不能选择html/body data, methods, template string/obj //生命周期 -- 虚拟DOM 1.初 ...

  5. 第5章-Vue.js交互及生命周期练习

    一.学习目标 使用网络请求进行前后端交互 (重点) 理解钩子函数的作用  (难点) 掌握Vue.js过滤器的使用方法 了解Vue.js事件的深入用法  (重点) 二.仿写留言板 2.1.实现" ...

  6. 常用vue请求交互数据方式

    几种 vue的数据交互形式 var that=this get请求 that.$http.get("1.txt").then(function(result){ console.l ...

  7. Vue 前后台交互，插件

    目录 Vuex 插件 前端存储数据汇总 前后台交互方式(重点) axios 插件 同源策略-跨域问题 前后台分离项目交互流程 异步请求细节 Element-ui 插件 jQ + Bs插件 Django ...

  8. 05 . Vue前端交互,fetch,axios,以asyncawait方式调用接口使用及案例

    目标 /* 1. 说出什么是前后端交互模式 2. 说出Promise的相关概念和用法 3. 使用fetch进行接口调用 4. 使用axios进行接口调用 5. 使用asynnc/await方式调用接口 ...

  9. vue接口交互写死的

    vue接口 写死的 RoleOfUserOrgRef: function ({ commit }, param) { return new Promise((resolve) => { $axi ...

  10. vue 后台交互数据-编辑页面

    思路~点击编辑按钮,需要获取当前列的id,然后根据id请求后台当前id的数据 1.~~ 2.接收id,并请求页面 获取数据

随机推荐

  1. 基于C# 开发的SOL SERVER 操作数据库类（SQLHelp）

    说明:以下是我近两年年来开发中最常用的C#操作sql server数据库访问类,对初学者非常有用,容易扩展,支持多库操作,多研究研究,有什么问题欢迎留言 当前环境为 C#  .NET CORE 3.0 ...

  2. CSS border(边框)

    CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 可以为上下左右每个框 定制不同的样式和颜色. 边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来定义 ...

  3. JAVA代码下载TXT文件(本地和服务器上的代码都可以)

    // 读取服务器文件内容(TXT文件测试可以) public static List<String> showTxt(String filePath) throws IOException ...

  4. Java IO流 - 字节流的使用详细介绍

    IO流的基本介绍: IO流的概述: i 表示intput,是数据从硬盘文件读入到内存的过程,称之输入,负责读. o 表示output,是内存程序的数据从内存到写出到硬盘文件的过程,称之输出,负责写. ...

  5. Microsoft edge锁定在任务栏上，被修改主页360的解决方法

    今天从桌面下边的任务栏打开Microsoft edge浏览器,突然发现主页被篡改为360导航了(生气!恶龙咆哮ooo 在桌面上是Microsoft edge,固定到任务栏就成为Microsoft ed ...

  6. 行行AI人才直播第10期：CTC智仝咨询联合创始人王发鑫《AI时代职场进阶之路——资深猎头的职场洞见》

    当今AI技术正在快速渗透各个行业,从去年热门的AIGC到今年爆火的ChatGPT,人工智能高速发展让人惊叹的同时,也让"算法取代人类"."AI或带来失业潮"等老 ...

  7. NOIP 2023 模拟赛 20230712 C 论剑

    首先是伟大的题面 然后是数据范围 先解决1-4号数据点 1.枚举每个gcd的值p,统计一次答案,得到最小值(期望得分20) \[ans=\min_{p=2}^{\max a}\sum^n_{i=1}\ ...

  8. 69.9K Star，最强开源内网穿透工具：frp

    作为一名开发者,有很多场景需要用到内网穿透,比如:我们在接入一些大平台做第三方应用时,在本地开发微信公众号工具的时候需要让微信平台能否访问到本地提供的接口.除此之外,还有很多其他场景,也会用到,比如: ...

  9. .NET Core多线程 (2) 异步 - 上

    去年换工作时系统复习了一下.NET Core多线程相关专题,学习了一线码农老哥的<.NET 5多线程编程实战>课程,我将复习的知识进行了总结形成本专题. 本篇,我们来复习一下异步的相关知识 ...

  10. Codeforces 1462F The Treasure of The Segments

    题意 给\(n(1\leq n\leq 2*10^5)\)个线段$[l_i,r_i] (1≤l_i≤r_i≤10^9) $,问最少删除几个线段,使得剩下线段中,有至少一个线段与所有线段相交. 分析 对 ...