Ajax在vue中的封装及使用

news/2024/2/29 3:43:32

今天给大家写一篇关于ajax在vue中的应用及封装,有些同学可能会有疑问,因为熟悉vue的都知道,vue中有vue-resource和axios是专门用于http交互的,那么ajax岂不是多此一举吗?其实不然,ajax有ajax的优势,并且小编本身对ajax有着特殊的感情,今天就给大家详细详解ajax在vue中的应用。

首先我们有必要配置一下jQuery,具体配置方法很简单,教程如下:

1.安装jquery 
npm install jquery --save-dev2.build/webpack.base.conf.js中, 
导入:var webpack = require('webpack'); 
最下面添加: 
plugins: [ 
new webpack.ProvidePlugin({ 
$:"jquery", 
jQuery:"jquery", 
"window.jQuery":"jquery" 
}) 
] 

如果你还未能配置好jquery的话,可以百度查找最新的教程解决问题,当然,配置jquery也是因为配合使用ajax,接下来我们需要新建一个js文件,存放的位置如下,当然也可以跟我的位置不同,随意

 

我们新建一个请求http的方法,叫postvoid

var common = {postvoid(url, data, cellback) {var token = xxxxxx;var username = xxxxxxx;$.ajax({type: "POST",url: this.res_url + url,data: data,async: true,headers: {"token": token,"username": username},success: function (res) {cellback(res)},error: function () {alert("网络错误")}})}}

module.exports = common
入参的url是请求地址,data是请求入参,callback是回调函数,用于返回调用方结果用 ,ajax的headers是请求头信息,module.exports = common 是把方法暴露给出去,方便调用。

下面我们看一下如何调用这个文件这个方法

首先我们在test.vue文件中导入http.js文件,并把结果赋给变量g,方便调用

 g.post_func("/api/v1/xxx", req_data, function(data) {console.log(data);});

调用起来就很简单了,把参数传进去,打印data就可以了

 


https://www.jiucaihua.cn/news/show-3418553.html

相关文章

SDKD 软件18-算法时间复杂度及空间复杂度

本人新手玩家,如有错误欢迎各位积极指正,不胜感激 判断题 1-1 (基础知识题) 1-2 具体增长速度看,函数图像 红色 \({xlog(x^2)}\) 黑色 \({x^2 log(x)}\) 1-3 \({n^n}\) 与 \({2^n}\) ,\(n\)较小时 \({2^n}\…

react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面

一、前言 9月,又到开学的季节。为每个一直默默努力的自己点赞!最近都沉浸在react native原生app开发中,之前也有使用vue/react/angular等技术开发过聊天室项目,另外还使用RN技术做了个自定义模态弹窗rnPop组件。 一、项目简述 基于…

IOS常用框架集合

IDealist框架-IOS常用框架集合 github 部分截图 要求 iOS 8.0swift 3.0安装方式 使用 CocoaPodspod IDealist 设置所有组件的主题色 IDealistConfig.share.id_setupMainColor(color: UIColor.red) 项目中引用IDeal框架 引用IDealist内部的框架有2种方法 1.按需导入,…

使用Alpine Linux和Oracle jre6构建Tomcat6镜像及应用容器化

使用Alpine Linux和Oracle jre6构建Tomcat6镜像及应用容器化 Dockerhub上的Tomcat最小版本是7.x,公司的老应用必须使用Tomcat6.x,另外因Oracle JDK版权问题。在Dockerhub上的JDK镜像都是使用Open JDK。公司要求使用Oracle JDK。SO,找不到合适的&#xff…

Kooteam 0.2.0 发布,新增周报、日报功能

Kooteam是一款轻量级的在线团队协作工具,提供各类文档工具、在线思维导图、在线流程图、项目管理、任务分发等工具,并接入了微信小程序,钉钉开放平台,使用便捷高效。 本次kooteam更新,跳票时间比较长,在此对…

如何选择腾讯云服务器配置?

国内的云服务器上知名的就那么几家,腾讯云是排名前列的云服务器提供商。而且腾讯云是国内互联网龙头企业,信得过,它们的产品是值得信任的。好了,废话不多说,我现在教下新手怎样选择和购买腾讯云服务器。这篇教程我写的…

dbdeployer MySQL沙盒部署详解

dbdeployer MySQL沙盒部署详解git地址: https://github.com/datacharmer/dbdeployer dbdeployer是go语言版实现的sandbox,和sandbox同一个作者。DBdeployer is a tool that deploys MySQL database servers easily. This is a port of MySQL-Sandbox, o…

SDKD 软件18-顺序表

数据结构萌新,欢迎指正 判断题 选择题 编程题 题意 我们可以使用 C 语言提供的数组直接进行线性表操作,由于题目未给出明确的问题规模,我们既可以根据经验预测出问题规模,也可以根据输入动态的开出相应大小的内存 数据很水变现不出…

IDEA导入Eclipse 非Maven的Web项目

转载于:https://www.cnblogs.com/season2009/p/11460259.html

普通路由器刷开源固件DD-WRT的简单过程

DD-WRT是基于Linux的无线路由软件,功能强大,它提供了许多一般路由器的软体所没有的功能,将路由器固件升级到DD-WRT可以提升内建于预设固件的限制,并将其转换成强大且具有进阶功能的商业级路由器。我是用它来建VPN的,网…