如何重构不同class按钮点击时向同一地址发送AJAX请求的重复代码

核心优化思路 #

• 提取所有可变规则为统一配置，后续调整逻辑仅需修改配置，无需改动核心执行代码
• 抽离公共AJAX请求逻辑，消除重复的请求配置、成功回调代码
• 批量绑定事件，减少重复的事件注册代码

优化后完整代码 #

<script type="text/javascript" language="javascript" >
// 按钮规则配置：新增/修改按钮仅需调整此处即可
const btnActionConfig = {
  '.passed': {
    paramName: 'passed_id',
    paramVal: 3
  },
  '.retest': {
    paramName: 'retest_id',
    paramVal: 4
  },
  '.proof': {
    paramName: 'info_id',
    paramVal: 5
  }
}

// 公共AJAX请求逻辑
function sendTestAction(testId, paramName, paramVal) {
  $.ajax({
    url: "testmanagement.php",
    method: "POST",
    data: {
      test_id: testId,
      [paramName]: paramVal
    },
    success: () => location.reload()
  })
}

// 批量绑定所有按钮点击事件
Object.entries(btnActionConfig).forEach(([selector, config]) => {
  $(document).on('click', selector, function() {
    const testId = $(this).attr('id')
    sendTestAction(testId, config.paramName, config.paramVal)
  })
})
</script>

可选优化建议 #

• 若后端接口可调整，建议统一请求参数名，比如所有请求都传action_id代替passed_id/retest_id/info_id，配置可进一步简化为{'.passed':3, '.retest':4, '.proof':5}，代码更简洁
• 建议将test_id存放到元素的data-*自定义属性中，比如<button class="passed" data-test-id="123">，取值时用$(this).data('testId')，避免和DOM元素的原生id属性用途冲突

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