本日给人人写一篇关于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就能够了