如何在AJAX中获取radio按钮值并实现单选按钮与JS代码的关联

• 第一步：给单选按钮组设置统一name属性
  你需要先给页面上所有关联的radio单选按钮设置相同的name属性，示例如下：

<!-- 放在你的HTML/PHP文件中，和搜索按钮同页面 -->
<input type="radio" name="search_filter" value="name" checked> 按名称筛选
<input type="radio" name="search_filter" value="population"> 按人口筛选
<input type="radio" name="search_filter" value="area"> 按面积筛选
<button id="submit">Search</button> 

• 第二步：添加获取选中单选按钮值的逻辑
  在JS中通过name属性选中radio组，遍历找到checked状态的元素取值，然后把参数拼到AJAX的请求地址中，或者用POST方式发送。
• 第三步：修改现有JS代码适配逻辑
  修改后的完整JS代码示例如下：

var xhr = new XMLHttpRequest();

// 页面加载完成后给搜索按钮绑定点击事件
function link_events() {
    document.getElementById("submit").addEventListener("click", sendSearchRequest, false);
}

function sendSearchRequest() {
    // 获取选中的radio值
    let selectedValue = "";
    const radioGroup = document.getElementsByName("search_filter");
    for (let radio of radioGroup) {
        if (radio.checked) {
            selectedValue = radio.value;
            break;
        }
    }

    xhr.addEventListener("readystatechange", showFile, false);
    // 把选中值作为GET参数拼到请求地址中，后端或XML处理逻辑可以读取这个参数做对应筛选
    xhr.open("GET", `un.xml?filter_type=${encodeURIComponent(selectedValue)}`);
    xhr.send();
}

function showFile() {
    var outstring = "<table><tr><th>Name</th><th>Population</th><th>Area</th></tr>";
    var i;

    if (xhr.readyState == 4 && xhr.status == 200){
        var countries = xhr.responseXML.getElementsByTagName("country");
        // 后续你可以根据拿到的筛选值处理countries数组的内容
    }
}

window.onload = link_events;

如果你要用POST方式传参，只需要把open方法的第一个参数改成POST，然后把参数放到send方法里即可，同时要额外设置请求头xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")。

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