JS新手求助：如何创建可复用类/函数实现参数化Ajax请求

嘿，我太懂你这种重复编写冗余Ajax代码的痛苦了！每次都要复制粘贴相同的配置项，既浪费时间又容易出错。咱们可以把这段代码封装成一个可复用的函数，以后只需要传入关键参数就能发起请求，省心多了～

基础版封装：针对POST JSON请求 #

首先，咱们先针对你常用的POST请求+JSON格式来封装一个专用函数，把固定的配置（比如dataType: "json"、contentType这些）都内置到函数里，你只需要传变化的部分：

// 封装POST JSON请求的函数
function postJsonRequest(url, requestData, successCallback, errorCallback) {
  // 固定的Ajax配置
  const ajaxConfig = {
    dataType: "json",
    type: "POST",
    url: url,
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(requestData),
    success: function(result) {
      // 如果传入了成功回调，就执行它
      if (typeof successCallback === 'function') {
        successCallback(result);
      }
    },
    error: function(xhr, status, error) {
      // 可选的错误处理，默认打印错误，也支持自定义回调
      if (typeof errorCallback === 'function') {
        errorCallback(xhr, status, error);
      } else {
        console.error('请求出错:', error);
      }
    }
  };

  // 发起请求
  $.ajax(ajaxConfig);
}

怎么使用这个函数？ #

对比你原来的代码，现在只需要这样调用：

// 原来的冗余代码
// $.ajax({ 
//   dataType: "json", 
//   type: "POST", 
//   url: "@Url.Action("power","Ranking")", 
//   contentType: "application/json; charset=utf-8", 
//   data: JSON.stringify({ "regionalManager": tmpString }), 
//   success: function (result) { }
// })

// 现在的简洁调用方式
postJsonRequest(
  "@Url.Action("power","Ranking")", // 请求URL
  { "regionalManager": tmpString }, // 请求参数
  function(result) {
    // 这里写成功后的逻辑，和原来的success回调完全一致
    console.log('请求结果:', result);
  },
  function(xhr, status, error) {
    // 可选：自定义错误处理逻辑
    alert('请求失败，请稍后重试');
  }
);

进阶版：通用Ajax请求函数 #

如果你以后需要用到GET请求，或者想自定义一些配置（比如超时时间、请求头），可以封装一个更通用的函数，允许你覆盖默认配置：

// 通用Ajax请求函数
function ajaxRequest(options) {
  // 默认配置
  const defaultOptions = {
    dataType: "json",
    type: "POST", // 默认POST请求，可按需覆盖
    contentType: "application/json; charset=utf-8",
    error: function(xhr, status, error) {
      console.error('请求出错:', error);
    }
  };

  // 合并用户传入的配置和默认配置，用户配置会覆盖默认值
  const finalOptions = $.extend({}, defaultOptions, options);

  // 如果是POST请求且有data，自动转成JSON字符串（省去手动JSON.stringify）
  if (finalOptions.type === 'POST' && finalOptions.data) {
    finalOptions.data = JSON.stringify(finalOptions.data);
  }

  // 返回Ajax对象，支持链式调用（比如.done()、.fail()）
  return $.ajax(finalOptions);
}

进阶版的使用示例 #

// POST请求（和基础版效果一致）
ajaxRequest({
  url: "@Url.Action("power","Ranking")",
  data: { "regionalManager": tmpString },
  success: function(result) {
    // 处理请求结果
  }
});

// GET请求（覆盖默认的type配置）
ajaxRequest({
  url: "@Url.Action("getList","Ranking")",
  type: "GET",
  success: function(result) {
    // 处理GET请求的结果
  }
});

// 自定义超时时间的请求
ajaxRequest({
  url: "@Url.Action("longTask","Ranking")",
  timeout: 10000, // 10秒超时
  success: function(result) {
    console.log('长任务完成:', result);
  },
  error: function(xhr, status) {
    if (status === 'timeout') {
      alert('请求超时，请稍后重试');
    }
  }
});

这样一来，你就再也不用重复写那些固定的配置项了，只需要关注每次请求的URL、参数、回调逻辑这些核心内容，大大提升开发效率～

内容的提问来源于stack exchange，提问作者papagallo