Ajax在vue中的封装及使用
今天给大家写一篇关于ajax在vue中的应用及封装,有些同学可能会有疑问,因为熟悉vue的都知道,vue中有vue-resource和axios是专门用于http交互的,那么ajax岂不是多此一举吗?其实不然,ajax有ajax的优势,并且小编本身对ajax有着特殊的感情,今天就给大家详细详解ajax在vue中的应用。
首先我们有必要配置一下jQuery,具体配置方法很简单,教程如下:
1.安装jquery npm install jquery --save-dev 2.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就可以了
相关推荐
时光如瑾雨微凉 2020-07-19
ppsurcao 2020-06-14
kentrl 2020-11-10
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
83510998 2020-07-18
坚持着执着 2020-07-16
jiaguoquan00 2020-07-07
李永毅 2020-07-05