JavaScript中校验URL参数通过后再发起API调用的问题修复

算力阿峰

2026-8-29

问题根因

原有校验逻辑失效是两个错误导致的：

条件判断逻辑错误：Object.fromEntries(urlParams)在无查询参数时返回空对象{}，永远不等于字符串'undefined'或null，配合||（或）逻辑会让判断条件恒为真，永远不会走到拦截分支。
校验逻辑缺失：原有代码完全没有实现要求的两项校验规则，既没检查r、z参数是否存在，也没验证两个值为非空数字。

修复后代码

const urlParams = new URL(window.location.href).searchParams;
const liveShoppingParams = Object.fromEntries(urlParams);
// 提取对应参数，自动去除首尾空格，兼容参数不存在的场景
const storeIdVal = liveShoppingParams.r?.trim();
const consultantIdVal = liveShoppingParams.z?.trim();

// 校验规则：参数存在非空 + 值为合法数字
const isParamsValid = Boolean(storeIdVal)
  && Boolean(consultantIdVal)
  && !isNaN(Number(storeIdVal))
  && !isNaN(Number(consultantIdVal));

if (isParamsValid) {
  $.ajax({
    type: 'POST',
    url: '/aos/lscommission',
    data: {
      storeId: storeIdVal,
      consultuntId: consultantIdVal,
    },
    success: function () {
      // 写入请求成功后的业务逻辑
    },
    error: function (error) {
      // 写入请求失败后的业务逻辑
    },
  });
} else {
  console.log('参数校验未通过，已拦截接口请求');
}

逻辑说明

参数提取阶段用可选链?.兼容参数不存在的场景，同时用trim()过滤参数值首尾的无效空格，避免全空格的非法值绕过校验。
校验阶段先判断两个参数均为非空值，排除undefined、空字符串、全空格的情况，再通过Number()转型+isNaN()判断值是否为合法数字，完全匹配要求的两项校验规则。
只有所有校验规则全部通过时才发起接口请求，参数非法时直接拦截。