详解vue与后端数据交互(ajax)：vue-resource

本人对vue与后端数据交互不是很懂,搜索了很多关于vue与后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考。希望此文章对各位有所帮助。

必须引入一个库：vue-resource

1.获取普通文本数据

比如:a.txt:

welcomet to vue!!!

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <script src="http://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
  <script type="text/javascript">
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data:{
          msg:'Hello World!',
        },
        methods:{
          get:function(){
            //发送get请求
            this.$http.get('a.txt').then(function(res){
              alert(res.body);
            },function(){
              console.log('请求失败处理');
            });
          }
        }
      });
    }
  </script>
</head>
<body>
  <div id="box">
    <input type="button" @click="get()" value="按钮">
  </div>
</body>
</html>

上面代码实现了，点击按钮，就发送get请求，然后把拿到的数据alert出来。

2.get发送数据给后端

假设后端地址是get.PHP，代码如下：

<?php
$a = $_GET['a'];
$b = $_GET['b'];

$c = $a + $b;

die($c);

this.$http.get('get.php',{a:1,b:2}).then(function(res){
 alert(res.body);
 },function(res){
         console.log(res.status);
        });

this.$http.get('get.php',jsonData) 第二个参数就是传到后端的数据。

3.post请求

post发送数据到后端，还需要第三个参数：{emulateJSON:true}

            this.$http.post('post.php',{a:1,b:2},{emulateJSON:true}).then(function(res){
              alert(res.body);
            },function(res){
              console.log(res.status);
            });

4.jsonp

这是360搜索jsonp的接口： https://sug.so.360.cn/suggest?callback=suggest_so&word=a

我们看vue-resource如何使用jsonp

            this.$http.jsonp('https://sug.so.360.cn/suggest',{word:'a'},{jsonp:'callback'}).then(function(res){
              console.log(res.data);
            },function(res){
              console.log(res.status);
            });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序 数据交互与渲染实例详解

    微信小程序 数据交互与渲染实例详解

    微信小程序 数据交互与渲染 实现效果图: 微信小程序的api中提供了网络交互的api,我们只要调用即可和后端进行数据交互,该api为wx.request.,具体代码如下. //list.js //获取应用实例 var app = getApp() Page({ data: { list:[], hiddenLoading: true, url: '' }, loadList: function () { var that = this; that.setData({ hiddenLoading:

  • SpringMVC前端和后端数据交互总结

    SpringMVC前端和后端数据交互总结

    本文主要介绍了SpringMVC前端和后端数据交互的资料,特地发出来记录一下.有需要的朋友可以了解一下. 控制器 作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转.SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面:其实就是servlet的替代品. 传值方式 springmvc最方便的一点就是可以通过注释方式来定义它的url. @Controller public class formMVC { @RequestMapp

  • 详解vue-Resource（与后端数据交互）

    单来说,vue-resource就像jQuery里的$.ajax,用来和后端交互数据的.可以放在created或者ready里面运行来获取或者更新数据... vue-resource文档:https://github.com/vuejs/vue-resource/blob/master/docs/http.md 结合vue-router data(){ return{ toplist:[], alllist:[] } }, //vue-router route:{ data({to}){ //并

  • Vue2学习笔记之请求数据交互vue-resource

    基本语法 必须引入一个库:vue-resource github地址 // 基于全局Vue对象使用http Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // 在一个Vue实例内使用$http this.$http.get('/so

  • SpringMVC实现前端后台交互传递数据

    本人对springmvc前端交互不太懂,搜索了很多关于springmvc前端交互介绍,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. Controller.java代码: @Controller public class DataController { //一.接收和通过ModelMap传出参数,不需要视图解析器,测试时加了解析器,顾返回值不需后缀 //普通参数 @RequestMapping("/data1") public String data1(@Req

  • ajax方式实现注册功能(提交数据到后台数据库完成交互)

    一.当我们在验证表单的时候,为了阻止把错误的也发送到服务器,我们通常这样设置: $(function(){ var isusername;(定一个变量) var ispwd; $('form').submit(function(e){ if(!isusername || !ispwd){ e.preventDefault();(阻止事件的默认事件) }) }); 1.在nodejs中我们可以用以下方法来(加载)跳转页面: JQuery 中的load()  这是实行加载一个页面  window.l

  • Android Activity 与Service进行数据交互详解

    Android Activity 与Service进行数据交互详解

    ①从设计的角度来讲: Android的Activity的设计与Web页面非常类似,从页面的跳转通过连接,以及从页面的定位通过URL,从每个页面的独立封装等方面都可以看出来,它主要负责与用户进行交互. Service则是在后台运行,默默地为用户提供功能,进行调度和统筹.如果一棵树的地上部分是Activity的话,它庞大的根须就是Service.Android的服务组件没有运行在独立的进程或线程中,它和其他的组件一样也在应用的主线程中运行,如果服务组件执行比较耗时的操作就会导致主线程阻塞或者假死,从

  • get post jsonp三种数据交互形式实例详解

    一.get请求 1.引入 vue.js 和 vue-resource.js , 准备一个按钮 <input type="button" value="按钮" @click="get()"/> //点击按钮请求数据函数get() 2.准备一个txt文件 welcome vue 3.编写js代码 <script> window.onload=function(){ new Vue({ el:'body', //主体为body,

  • 详解vue与后端数据交互(ajax)：vue-resource

    详解vue与后端数据交互(ajax)：vue-resource

    本人对vue与后端数据交互不是很懂,搜索了很多关于vue与后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. 必须引入一个库:vue-resource 1.获取普通文本数据 比如:a.txt: welcomet to vue!!! <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <sc

  • 如何理解Vue前后端数据交互与显示

    如何理解Vue前后端数据交互与显示

    一.技术概述 将后端所计算的数据呈现在前端页面的相应位置并根据用户点击操作改变相应的数据和界面,再传值给后端.该技术是Web开发必备,是前后端交互的纽带.难点在于获取后端数据并且防止数据联动. 二.技术详述 1. 从接口获取后端数据 (1) 仔细查看后端所传数据的类型.主要是区分数组和单个数据.查看后端的请求方式,区分post或者get. (2) 首先,在data中return一个xxxData:[]数组或一个变量xxxData:<类型>来接收后端传来的数据. (3) 在方法中定义一个请求函数

  • 详解springmvc之json数据交互controller方法返回值为简单类型

    当controller方法的返回值为简单类型比如String时,该如何与json交互呢? 使用@RequestBody 比如代码如下: @RequestMapping(value="/ceshijson",produces="application/json;charset=UTF-8") @ResponseBody public String ceshijson(@RequestBody String channelId) throws IOException{

  • vue.js前后端数据交互之提交数据操作详解

    本文实例讲述了vue.js前后端数据交互之提交数据操作.分享给大家供大家参考,具体如下: 前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点...额 ...复杂,所以这里给大家提供一种用vue-resource向后端提交数据. (1)第一步,先在template中写一个表单: <el-form :model="ruleForm" :rules="rules" ref=&quo

  • AJAX SpringBoot 前后端数据交互的项目实现

    AJAX SpringBoot 前后端数据交互的项目实现

    目录 1.Ajax概述 2.基于JQuery的AJAX语法 1. Ajax 概述 Ajax 的英文全称是 ”Asynchronous JavaScript and XML“,即 ”异步的 JavaScript 和 XML“.其核心是通过 JavaScript 的 XMLHttpRequest 对象,以一种异步的方式,向服务器发送数据请求,并且通过该对象接收请求返回的数据,从而实现客户端与服务器端的数据交互. 优点:Ajax 能够刷新指定的页面区域(局部刷新),而不是刷新整个页面,从而减少客户端和

  • 详解vue-admin和后端(flask)分离结合的例子

    详解vue-admin和后端(flask)分离结合的例子

    本文介绍了vue-admin和后端(flask)分离结合的例子,分享给大家,具体如下 感觉 vue-admin 界面很不错,写了一个小 Demo 看到issues好多问后端数据请求的 就上传了自己最近的这个vue-admin-flask-example,做下小小的分享 API汇总: 登录 var params = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass }; export const reque

  • 一文详解Pinia和Vuex与两个Vue状态管理模式

    一文详解Pinia和Vuex与两个Vue状态管理模式

    目录 前言 安装 挂载 Vuex Pinia 修改状态 vuex Pinia Pinia解构(storeToRefs) getters Pinia Vuex modules Pinia Vuex 写在最后 前言 Pinia和Vuex一样都是是vue的全局状态管理器.其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia. 本文将通过Vue3的形式对两者的不同实现方式进行对比,让你在以后工作中无论使用到Pinia还是Vuex的时候都能够游刃有余. 既然我们要

  • 详解Flask前后端分离项目案例

    简介 学习慕课课程,Flask前后端分离API后台接口的实现demo,前端可以接入小程序,暂时已经完成后台API基础架构,使用 postman 调试.git 重构部分: ken校验模块 auths认证模块 scope权限模块,增加全局扫描器(参考flask HTTPExceptions模块) 收获 我们可以接受定义时的复杂,但不能接受调用时的复杂 如果你觉得写代码厌倦,无聊,那你只是停留在功能的实现上,功能的实现很简单,你要追求的是更好的写法,抽象的艺术,不是机械的劳动而是要 创造 ,要有自己的

  • 详解MySQL中的数据类型和schema优化

    最近在学习MySQL优化方面的知识.本文就数据类型和schema方面的优化进行介绍. 1. 选择优化的数据类型 MySQL支持的数据类型有很多,而如何选择出正确的数据类型,对于性能是至关重要的.以下几个原则能够帮助确定数据类型: 更小的通常更好 应尽可能使用可以正确存储数据的最小数据类型,够用就好.这样将占用更少的磁盘.内存和缓存,而在处理时也会耗时更少. 简单就好 当两种数据类型都能胜任一个字段的存储工作时,选择简单的那一方,往往是最好的选择.例如整型和字符串,由于整型的操作代价要小于字符,所

随机推荐