初学者福音：掌握Ajax技巧，轻松获取单选框和复选框数据

2022-11-13 13:32:46

Ajax入门指南：轻松获取单选框和复选框数据

获取单选框数据

当您希望用户从一组选项中选择一个特定选项时，单选框非常方便。使用Ajax，您可以轻松地获取所选单选框的值并将其发送到服务器，以便进一步处理。

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

function getGender() {
  var radioButtons = document.querySelectorAll('input[name="gender"]');

  for (var i = 0; i < radioButtons.length; i++) {
    if (radioButtons[i].checked) {
      var gender = radioButtons[i].value;

      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'save_gender.php', true);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.send('gender=' + gender);

      xhr.onload = function() {
        if (xhr.status === 200) {
          alert('性别已保存：' + gender);
        } else {
          alert('保存性别时发生错误');
        }
      };
    }
  }
}

获取复选框数据

另一方面，复选框允许用户从一组选项中选择多个选项。通过Ajax，您可以收集所有选中的复选框值并将其发送到服务器。

<input type="checkbox" name="hobbies[]" value="coding"> 编程
<input type="checkbox" name="hobbies[]" value="reading"> 阅读
<input type="checkbox" name="hobbies[]" value="music"> 音乐

function getHobbies() {
  var checkboxes = document.querySelectorAll('input[name="hobbies[]"]');

  var hobbies = [];

  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      hobbies.push(checkboxes[i].value);
    }
  }

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'save_hobbies.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send('hobbies=' + hobbies.join(','));

  xhr.onload = function() {
    if (xhr.status === 200) {
      alert('爱好已保存：' + hobbies.join(', '));
    } else {
      alert('保存爱好时发生错误');
    }
  };
}