Question

我有一组radiobuttons列出了学校里所有可用的成绩。 onchange事件触发Ajax请求，该请求返回该特定等级的所有可用主题并将其显示在列表框中。不幸的是，它总是返回组中第一个单选按钮的值。除了传递错误的单选按钮值之外，其他所有内容仍然有效。

如果我使用另一个列表框而不是单选按钮，该过程将完美运行。

我觉得我错过了明显的出血，但我看不出是什么。感激地收到任何建议。

<html>
<body>
<script language="javascript" type="text/javascript">
<!-- 
function ajaxFunction(sender){    
    var ajaxRequest;  
    ajaxRequest = new XMLHttpRequest();
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            var ajaxDisplay = document.getElementById(sender + "div");
            ajaxDisplay.innerHTML = ajaxRequest.responseText;
        }
    }
    // Now get the value from user and pass it to the server script.
    var grade = document.getElementById(sender).value;  //works
    var queryString = "?grade=" + grade + "&subject=" + sender;
    ajaxRequest.open("GET", "process_ajax_7.php" + queryString, true);
    ajaxRequest.send(null); 
}
//-->
</script>
    <form action="process.php" method="get" name="myform">
        <label><input type="radio" id = "subject1" name="subject1" onclick=ajaxFunction('subject1'); value="09">Grade 9</label>
        <label><input type="radio" id = "subject1" name="subject1" onclick=ajaxFunction('subject1'); value="10">Grade 10</label>
        <label><input type="radio" id = "subject1" name="subject1" onclick=ajaxFunction('subject1'); value="11">Grade 11</label>
        <label><input type="radio" id = "subject1" name="subject1" onclick=ajaxFunction('subject1'); value="12">Grade 12</label>
        <br><br>
        <select id="subject2" name="subject2" onchange=ajaxFunction('subject2');>
            <option> </option>
            <option value="09"> Year 9 </option>
            <option value="10"> Year 10 </option>
            <option value="11"> Year 11 </option>
            <option value="12"> Year 12 </option>
            <option value="00"> Electives </option>
        </select> 
    </form>
    <div id='subject1div'>First results will display here</div><br><br><br><br><br><br><br><br><br><br><div id='subject2div'>Second results will display here</div>
</body>
</html>

Answer 1

以下是我对您的代码所做的更改

在onclick中，将this作为参数
在ajaxFunction使用sender.name和sender.value分别获取主题和年份
使用xhr.onload而不是过时的onreadystatechange - 但不确定哪个版本的IE支持xhr2

所以它最终会像这样

<html>
<body>
<script language="javascript" type="text/javascript">
function ajaxFunction(sender){    
    var ajaxRequest = new XMLHttpRequest();
    ajaxRequest.onload = function(){
        var ajaxDisplay = document.getElementById(sender.name + "div");
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
    // Now get the value from user and pass it to the server script.
    var queryString = "?grade=" + sender.value + "&subject=" + sender.name;
    ajaxRequest.open("GET", "process_ajax_7.php" + queryString, true);
    ajaxRequest.send(null); 
}
</script>
    <form action="process.php" method="get" name="myform">
        <label><input type="radio" id = "subject1" name="subject1" onclick=ajaxFunction(this); value="09">Grade 9</label>
        <label><input type="radio" id = "subject2" name="subject1" onclick=ajaxFunction(this); value="10">Grade 10</label>
        <label><input type="radio" id = "subject3" name="subject1" onclick=ajaxFunction(this); value="11">Grade 11</label>
        <label><input type="radio" id = "subject4" name="subject1" onclick=ajaxFunction(this); value="12">Grade 12</label>
        <br><br>
        <select id="subject2" name="subject2" onchange=ajaxFunction('subject2');>
            <option> </option>
            <option value="09"> Year 9 </option>
            <option value="10"> Year 10 </option>
            <option value="11"> Year 11 </option>
            <option value="12"> Year 12 </option>
            <option value="00"> Electives </option>
        </select> 
    </form>
    <div id='subject1div'>First results will display here</div><br><br><br><br><br><br><br><br><br><br><div id='subject2div'>Second results will display here</div>
</body>
</html>

单选按钮没有使用Ajax发送正确的值

1 个答案: