【代码片段】vue中使用jquery发送ajax请求封装

最新推荐文章于 2026-04-24 03:29:35 发布

原创最新推荐文章于 2026-04-24 03:29:35 发布 · 3.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Vue项目中结合jQuery封装AJAX请求。首先确保安装了jQuery，然后在`request.js`中定义请求方法，例如POST。接着在`main.js`中引入并全局使用，方便在Vue组件中调用。

首先确保你的vue项目中已经安装了jquery，如果没有请先安装。

src/request/request.js ：

import $ from "jquery"

var app_debug = true;
if (app_debug == true) {
    var HTTP_HOST = "http://开发环境地址";
} else {
    var HTTP_HOST = "http://生产环境地址";
}


// 获取请求完整url
var ajax_url = function(url){
    return HTTP_HOST + url;
}

// 获取请求完整参数
var ajax_data = function(data = {}){
    data["_client_"] = "web";
    data["_version_"] = "1.0.0";
    // 更多公共参数~
    
    return JSON.stringify(data);
}

// 公共请求成功（需验证业务逻辑）
var ajax_success = function(result, status, xhr){
    // 验证业务逻辑部分（如未登录跳转登录等~）
    
    return true;
}

// 公共请求失败
var ajax_error = function(xhr, status, error){
    // 公共请求失败处理逻辑
    
    console.log("请求失败:" + error);
    return true;
}

// AJAX请求默认参数
$.ajaxSetup({
	type: "POST",
	dataType: "json",
	timeout: 3000,
    beforeSend : function(request) {
        request.setRequestHeader("Content-Type", "application/json; charset=utf-8");
    }
});

export default {
    post (url, data = {}, callback, errCallback) {
        $.ajax({
            url: ajax_url(url),
            data: ajax_data(data),
            success (result, status, xhr){
                if (ajax_success(result, status, xhr) === true) {
                    typeof(callback) == "function" && callback(result, status, xhr);
                }
            },
            error (xhr, status, error) {
                if (ajax_error(xhr, status, error) === true) {
                    typeof(errCallback) == "function" && errCallback(xhr, status, error);
                }
            }
        });
    }
}

注：我只放了一个post的请求方法，如需更多请自行扩展

main.js 中添加以下内容


import $ from 'jquery'
import request from './request/request.js'

Vue.prototype.request = request;

使用:

this.request.post("test", {}, function(){
    console.log('success');
}, function(){
    console.log('error');
});