网络编程

vue发送ajax请求详解
网络编程 2025/1/12 佚名
3 2

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库


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


                                

                                

                                     

                                

                                    标签：
                                        
vue,axios,axios,vue,ajax获取数据,vue.js,ajax跨域
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“vue发送ajax请求详解”

暂无“vue发送ajax请求详解”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com