当前位置 : 主页 > 网络编程 > JavaScript >

VUE与服务器的联系

来源:互联网 收集:自由互联 发布时间:2021-06-28
vue的上传服务代码,ajax、$http(axios) 一、通过jq的ajax来链接接口(先安装好jquery)//获取数据$.ajax({ url: '接口路径', dataType: 'json', success: function (data) { console.log(data) }})//传递参数$.ajax({ url:
vue的上传服务代码,ajax、$http(axios)
一、通过jq的ajax来链接接口(先安装好jquery)
//获取数据
$.ajax({
    url: '接口路径',
    dataType: 'json',
    success: function (data) {
        console.log(data)
    }
})
//传递参数
$.ajax({
    url: '接口路径',
    //数据
    data: {'shopnum': 333},
    type: 'GET',
    dataType: 'json',
    success: function (data) {
        console.log(data)
    }
})

二、通过$http来连接接口
1.先要安装axios、vue-axios

2.在main.js(可以在其它页面)引用axios、vue-axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

3.在.vue使用
  1>没有参数的获取
  his.$http.get('接口路径').then(function (data) {
      //返回的数据
      console.log(data)
  })
  2>需要传参
  this.$http.get('接口路径', {params: {username: data}}).then(function (data) {
      //返回的数据
      console.log(data)
  })

三、通过jq的ajax(这个能对上传有效)
  var fa = new FormData()
  fa.append('file', e.target.files[0])
  $.ajax({
      url: '接口路径',
      type: 'GET',
      data: fa,
      processData: false,
      contentType: false
  }).done(function (res) {
      console.log('上传成功!')
      //初始化input[type='file'],可以重复上传
      e.target.value = ''
  })
网友评论