当前位置:首页 >> 网络编程

vue发送ajax请求详解

vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本)、axios(vue2.0版本)等插件实现

axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护

本文为大家介绍vue使用axios发送AJAX请求

首页安装并引入axios

1、npm install axios -S        #直接下载axios组件,下载完毕后axios.js就存放在node_modules\axios\dist中

2、网上直接下载axios.min.js文件

3、通过script src的方式进行文件的引入<script src="/UploadFiles/2021-04-02/axios.min.js">

axios基本使用方法

发送get请求

1、基本使用格式

格式1:axios([options]) #这种格式直接将所有数据写在options里,options其实是个字典

格式2:axios.get(url[,options]);

2、传参方式:

通过url传参

通过params选项传参

下面我们来看一个vue发送ajax get请求实例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>发送AJAX请求</title>
  <script src="/UploadFiles/2021-04-02/vue.js">

发送post请求(push,delete的非get方式的请求都一样)

1、基本使用格式

格式:axios.post(url,data,[options]);

2、传参方式

1、自己拼接为键值对

2、使用transformRequest,在请求发送前将请求数据进行转换

3、如果使用模块化开发,可以使用qs模块进行转换

4、注释:axios默认发送post数据时,数据格式是Request Payload,并非我们常用的Form Data格式,所以参数必须要以键值对形式传递,不能以json形式传参

下面看是一个vue发送ajax post请求实例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>发送AJAX请求</title>
  <script src="/UploadFiles/2021-04-02/vue.js">

上面我们所介绍的vue发送ajax请求都是在同一域名下进行的也就是同域或者说是同源

那么vue如何发送跨域的ajax请求呢?

vue发送跨域ajax请求

1、须知:axios本身并不支持发送跨域的请求,没有提供相应的API,作者也暂没计划在axios添加支持发送跨域请求,所以只能使用第三方库

2、使用vue-resource发送跨域请求

3、 安装vue-resource并引入   

npm info vue-resource           #查看vue-resource 版本信息

cnpm install vue-resource -S #等同于cnpm install vue-resource -save

4、基本使用方法(使用this.$http发送请求)

this.$http.get(url, [options])

this.$http.head(url, [options])

this.$http.delete(url, [options])

this.$http.jsonp(url, [options])

this.$http.post(url, [body], [options])

this.$http.put(url, [body], [options])

this.$http.patch(url, [body], [options])

下面再来看两个实例

向360搜索发送数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>发送AJAX请求</title>
  <script src="/UploadFiles/2021-04-02/vue.js">vue发送跨域ajax请求带jsonp参数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>发送AJAX请求</title>
  <script src="/UploadFiles/2021-04-02/vue.js">

Vue作为一个没有入侵性的框架并不限制你使用ajax框架

使用了Vue后,ajax部分你可以做如下选择:

1.使用JS原生XHR接口

2.引入JQuery或者Zepto 使用$.ajax();

3.Vue的github上提供了vue-resource插件 :

4.使用 fetch.js

5.自己封装一个ajax库

至于哪种方式适合自己的项目大家可以自行选择