使用Ajax更新表单时，是否有更高效的实现方式？

你这段代码重复度极高，核心逻辑都是监听单选按钮切换、发送POST请求更新结果，只是单选按钮的name和对应传参的键名不同。可以通过统一事件监听+参数映射的方式大幅简化代码：

优化思路 #

1. 用映射表记录每个单选按钮name对应的后端参数键名
2. 一次性绑定所有目标单选按钮的change事件
3. 回调里根据映射表自动匹配参数，发起Ajax请求

优化后的代码 #

<script>
// 定义单选按钮name与后端参数键名的映射关系
const paramMap = {
  'data': 'monthlydata',
  'contract_length': 'contract_length',
  'price': 'price',
  'mbprice': 'price',
  'mbcontract_length': 'contract_length',
  'mbdata': 'monthlydata'
};

// 封装通用的结果更新函数
function updateResults(paramKey, value) {
  $.ajax({
    type: "POST",
    url: "results.php",
    data: { [paramKey]: value }, // 用对象传参更安全，自动处理字符编码
    success: function(response) {
      $('#results').show(1000).html(response);
    }
  });
}

// 统一绑定所有目标单选按钮的change事件
$('input[type=radio]').filter(function() {
  // 只筛选映射表里存在的单选按钮，避免触发无关控件
  return Object.keys(paramMap).includes($(this).attr('name'));
}).on('change', function() {
  const $radio = $(this);
  updateResults(paramMap[$radio.attr('name')], $radio.val());
});
</script>

额外说明 #

• 用对象形式传递data，比字符串拼接更安全，能自动处理特殊字符的编码问题
• 后续新增单选按钮组时，只需在paramMap里添加一条映射关系即可，不用重复写Ajax逻辑
• 如果页面中没有其他无关的单选按钮，也可以把filter部分去掉，直接用$('input[type=radio]').on('change', ...)

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