vue结合axios与后端进行ajax交互的方法

2024-10-20 13:50:41

以前vue官方推荐的ajax库是vue-resource, 现在改为axios

axios的github仓库

实现的效果：

异步请求

页面异步发出get请求获取数据，提交表单异步post数据到服务端

客户端

客户端代码

代码解析：

// 服务端请求地址
let url = 'http://local.php.com/index.php';
let vm = new Vue({
  el: "#app",
  data: {
    list: [],
    name: '',
    saying: '',
  },
  methods: {
    add() {
      // 传送的数据为json格式
      let data = JSON.stringify({
        name: this.name,
        saying: this.saying
      });
      axios.post(url, data)
      .then(function (response) {
        // console.log(response);
        // 获取服务端返回的数据
        vm.$data.list = response.data;
      })
      .catch(function (error) {
        console.log(error);
      });
    }
  }
});
axios.get(url, {})
  .then(function (response) {
    vm.$data.list = response.data;
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

服务端

使用php作为服务端程序

服务端代码

代码解析：

<?php
  header("Access-Control-Allow-Origin:*"); // 如果客户端和服务端不同域，要加上这行代码，不然会报跨域错误
  $data = [
    1 => ['name' => '孙悟空', 'saying' => '我是在地球上成长的赛亚人'],
  ];

  $post = file_get_contents("php://input"); // 不要用$_POST接收数据
  if ($post) {
    $data[] = json_decode($post, true);
  }
  echo json_encode($data, true);

异步请求.gif

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

vue axios整合使用全攻略

惯例先安装axios,不多说! cnpm install axios 1.axios配置我的目录结构src/axios/index.js,axios配置都在该文件下 src/axios/index.js 如下: import axios from 'axios' import qs from 'qs' // axios 配置 axios.defaults.timeout = 5000; axios.defaults.headers.post['Content-Type'] = 'applica
vue中axios的封装问题(简易版拦截,get,post)

第一步还是先下载axios npm install axios --save 第二步/src/utils/目录下建立一个htttp.js import axios from 'axios'; axios.defaults.timeout = 5000; axios.defaults.baseURL =''; //http request 拦截器 axios.interceptors.request.use( config => { // const token = getCookie('名称')
vue+axios新手实践实现登陆的示例代码

其实像这类的文章网上已经有很多很好的,写这篇文章,相当于是做个笔记,以防以后忘记用到的:1. vuex 2.axios 3.vue-route 登陆流程为: 1.提交登陆表单,拿到后台返回的数据 2.将数据存入vuex vuex配置这里直接跳过安装之类的,百度一大堆,我直接上代码 // store index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 初始化时用sessionStore.getItem(
详解vue中axios的封装

第一步还是先下载axios cnpm install axios -S 第二步建立一个htttp.js import axios from 'axios'; import { Message } from 'element-ui'; axios.defaults.timeout = 5000; axios.defaults.baseURL =''; //http request 拦截器 axios.interceptors.request.use( config => { // const to
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper

1.vue-cli 构建项目 //全局安装 vue-cli npm install - g vue- cli //创建一个基于 webpack 模板的新项目 vue init webpack my- project //cd 进入刚新建的项目文件(my-project) cd my- project // 运行 npm run dev 2.vue-cli 使用axios //1.先安装axios npm install axios //2.main.js中引入并放在Vue的原型上 import
vue2.0学习之axios的封装与vuex介绍

一.前言博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助.这篇博客针对了解过vue基础,但是没有做过vue项目的童鞋.如果想看基础指令,可以看我之前的一篇博客,请点击跳转, 不过我还是建议看文档比较好.os: Vue文档是非常详细的二.准备做vue单页应用都需要会什么? 1. vue的脚手架,直接帮你建好项目.再看看自己想要啥,补充啥! os: Git 上有很多成品项目,可以找一个好点的拉下来注:路由按需加载.热加载等这些都是基础功能,在这不多说.os
Vue二次封装axios为插件使用详解

照例先贴上 axios的 gitHub 地址不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是一定要写的优美,因此加上一层封装是必要的 vuejs2.0 已经不再维护 vue-resource,vuejs2.0 已经使用了 axios,这也是为什么我会转到 axios 的主要原因,废话不多说: 基本的封装要求: 统一 url 配置统一 api 请求 request (请求)拦截器,例如:带上token等,设置请求头 response (响应)拦截器,例如:统一错误处理,页面重
vue 实现axios拦截、页面跳转和token 验证

第一步: 路由多添加一个自定义字段 requireAuth path: '/repository', name: 'repository', meta: { requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的 }, component: Repository 第二步: router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (store.sta
vue框架搭建之axios使用教程

前后端数据交互作为项目最基础需求(静态的除外),同时也是项目中最重要的需求. 本文重点介绍axios如何配合vue搭建项目框架,而axios的详细使用介绍请移步使用说明 1.安装 cnpm install axios --save-dev 2.引入 main.js 文件引入: import Vue from 'vue'//引入vue import axios from 'axios'//引入axios Vue.prototype.$axios = axios;//把axios挂载到vue上 3
vue结合axios与后端进行ajax交互的方法

以前vue官方推荐的ajax库是vue-resource, 现在改为axios axios的github仓库实现的效果: 异步请求页面异步发出get请求获取数据,提交表单异步post数据到服务端客户端客户端代码代码解析: // 服务端请求地址 let url = 'http://local.php.com/index.php'; let vm = new Vue({ el: "#app", data: { list: [], name: '', saying: '', },
vue利用axios来完成数据的交互

axios基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用现在Vue官方推荐的网络通信库不再是vue-resource了,推荐使用axios.所以学习了下,总结如下. 一.功能特性 1.在浏览器中发送 XMLHttpRequests 请求 2.在 node.js 中发送 http请求 3.支持 Promise API 4.拦截请求和响应 5.转换请求和响应数据 6.自动转换 JSON 数据 7.客户端支持保护安全免受 XSRF 攻击二.axios的安装
详解Vue中Axios封装API接口的思路及方法

一.axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 在一个项目中我们如果要使用很多接口的话,总不能在每个页面都写满了.get()或者.post()吧?所以我们就要自己手动封装一个全局的Axios网络模块,这样的话就既方便也会使代码量不那么冗余. 安装 > npm install axios //这个
vue.js $refs和$emit 父子组件交互的方法

本文介绍了vue.js $refs和$emit 父子组件交互的方法,分享给大家,废话不多说直接看代码: <strong>父调子 $refs (把父组件的数据传给子组件) </strong><br><br><template> <div id="app"> <input type="button" name="" id="" @click="
Python Flask前后端Ajax交互的方法示例

之前总结过flask里的基础知识,现在来总结下flask里的前后端数据交互的知识,这里用的是Ajax 一. post方法 1.post方法的位置:在前端HTML里,绑定在一个按钮的点击函数里,或者一个鼠标输入框点击离开事件. (1)数据附在URL里(请求路径),发送到后端. /*前端HTML<script>里:*/ $.post("/js_post/"+ip, data_to_backend, function(data){alert("success "
Vue中前端与后端如何实现交互

目录 Promise的基本使用基本使用多个请求,链式编程 Promise的API—实例方法 Promise的API—对象方法(直接通过Promise函数名称调用的方法) 接口调用-fetch用法基本使用常用配置选项 fetch响应结果接口调用–axios用法认识 axios的基础用法 axios的响应结果 axios拦截器 async 和 await async 基础用法 async 函数处理多个异步函数 Promise的基本使用基本使用 new一个promise,为其传入一个函数
SpringBoot+Vue.js实现前后端分离的文件上传功能

这篇文章需要一定Vue和SpringBoot的知识,分为两个项目,一个是前端Vue项目,一个是后端SpringBoot项目. 后端项目搭建我使用的是SpringBoot1.5.10+JDK8+IDEA 使用IDEA新建一个SpringBoot项目,一直点next即可项目创建成功后,maven的pom配置如下 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> &l
vue中get请求如何传递数组参数的方法示例

前言: vue中在与后端进行数据交互时,使用axios发送请求,不做配置直接使用get请求传递数组类型参数的时候,后端是无法接收数据的,需要对axios一些简单的配置才能让后端完美的接收数组 1.问题示例代码 let params = { statusList: ['OVERDUE', 'DELAY'] } this.$http.get('/list', params) .then(res => {}) .catch(e => {}) 上述代码在不做配置的时候请求信息为:/list?stat
vue中axios实现数据交互与跨域问题

1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的. 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制. 下载地址: https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.js axios提供发送请求的常用方法有两个:axio
Vue生命周期与后端交互实现流程详解

目录表单控制购物车案例 v-model进阶(了解) vue生命周期与后端交互电影案例表单控制 1.input:checkbox(单选,多选),radio(单选) 2.代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="j

vue结合axios与后端进行ajax交互的方法

相关推荐

随机推荐