JavaScript中AJAX提交表单时单选/复选框JSON数据发送异常求助

我编写了一段使用JavaScript和AJAX发送JSON对象的代码，需求为点击提交按钮后运行sendJSON函数，将包含用户名、邮箱、单选按钮、复选框、文本域等类型的输入框数据以JSON格式发送至服务器。目前文本类输入可正常运行，但单选按钮和复选框的数据无法以JSON格式发送，恳请提供技术帮助，谢谢！

原问题中的JavaScript代码：

function sendJSON(){
 let result = document.querySelector('.result');
 let aed_modifing = document.querySelector('#aed_modifing');
 let compliant_on_AED = document.querySelector('#compliant_on_AED');
 let frequency_per_month = document.querySelector('#frequency_per_month');
 let last_visit = document.querySelector('#last_visit');
 let last_visit_seizure = document.querySelector('#last_visit_seizure');
 let same_seizure_type = document.querySelector('#same_seizure_type');
 let triggering_factors = document.querySelector('#triggering_factors');
 // Creating a XHR object
 let xhr = new XMLHttpRequest();
 let url = "submit.txt";
 // open a connection
 xhr.open("POST", url, true);
 // Set the request header i.e. which type of content you are sending
 xhr.setRequestHeader("Content-Type", "application/json");
 // Create a state change callback
 xhr.onreadystatechange = function () {
 if (xhr.readyState === 4 && xhr.status === 200) {
 // Print received data from server
 result.innerHTML = this.responseText;
 console.log(this.responseText);
 }
 };
 // Converting JSON data to string
 var data = JSON.stringify({
 "aed_modifing": aed_modifing.value,
 "compliant_on_AED":compliant_on_AED.value ,
 "frequency_per_month" : frequency_per_month.value ,
 "last_visit" : last_visit.value ,
 "last_visit_seizure" :last_visit_seizure.value ,
 "same_seizure_type":same_seizure_type.value,
 "triggering_factors":triggering_factors.value
 });
 // Sending data with the request
 xhr.send(data);
 }

问题根源 #

单选按钮和复选框的取值逻辑和普通文本输入框完全不同：

• 单选按钮是互斥组选项，直接通过querySelector拿单个元素的value，只会拿到该元素的默认值，而非用户选中的选项值。
• 复选框支持多选，单个元素的value无法体现所有选中项，需要批量收集选中的选项值。

修复方案及修改后的代码 #

下面是调整后的完整代码，针对单选和复选框做了专门的取值处理：

function sendJSON(){
  let result = document.querySelector('.result');
  // 文本类输入（保持原有逻辑）
  let aed_modifing = document.querySelector('#aed_modifing');
  let frequency_per_month = document.querySelector('#frequency_per_month');
  let last_visit = document.querySelector('#last_visit');
  let last_visit_seizure = document.querySelector('#last_visit_seizure');
  let same_seizure_type = document.querySelector('#same_seizure_type');

  // --- 处理单选按钮 ---
  // 假设单选按钮组共用name属性"compliant_on_AED"，找到当前选中的按钮
  let selectedRadio = document.querySelector('input[name="compliant_on_AED"]:checked');
  // 容错处理：如果用户未选单选，设置默认空值避免JSON报错
  let compliantValue = selectedRadio ? selectedRadio.value : "";

  // --- 处理复选框 ---
  // 假设复选框组共用name属性"triggering_factors"，获取所有选中的复选框
  let checkedCheckboxes = document.querySelectorAll('input[name="triggering_factors"]:checked');
  // 遍历收集所有选中项的value，存为数组
  let triggeringFactorsValues = Array.from(checkedCheckboxes).map(box => box.value);

  // 创建XHR对象（保持原有逻辑）
  let xhr = new XMLHttpRequest();
  let url = "submit.txt";
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type", "application/json");

  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      result.innerHTML = this.responseText;
      console.log(this.responseText);
    }
  };

  // 构建JSON数据（替换单选和复选框的取值逻辑）
  var data = JSON.stringify({
    "aed_modifing": aed_modifing.value,
    "compliant_on_AED": compliantValue,
    "frequency_per_month" : frequency_per_month.value,
    "last_visit" : last_visit.value,
    "last_visit_seizure" : last_visit_seizure.value,
    "same_seizure_type": same_seizure_type.value,
    "triggering_factors": triggeringFactorsValues // 用数组存储多选的复选框值
  });

  xhr.send(data);
}

关键注意点 #

• 请确保你的单选按钮组共用同一个name属性（比如<input type="radio" name="compliant_on_AED" value="yes">），否则:checked选择器无法定位到选中项。
• 复选框同样需要共用同一个name属性，这样querySelectorAll才能获取到该组的所有复选框。
• 代码中加入了未选中单选的容错处理，避免出现undefined破坏JSON格式。

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