javascript - 为什么我的 AJAX 请求没有返回正确的文本？

Question

我有一个 HTML 文件和一个 PHP 文件。

HTML 文件有 3 个可点击的 div 按钮。当我单击它们中的每一个时，它们应该触发一个不同的 Javascript 函数，该函数返回不同的 AJAX 响应。

我的问题是无论我点击哪个按钮，程序总是只从一个函数产生相同的 AJAX 响应。

具体来说，无论我点击哪个按钮，程序总是从 showAll() 函数发出 GET 请求。我知道这一点，因为我让 PHP 文件打印出 GET 请求参数，当我希望参数等于“major”或“course”时，它总是说“show”参数等于“all”。

HTML

<div id="List">
      <div id="entries">
  </div>

  <a href="" onclick="showAll()">
      <div id="button_all" class="buttons">
          <p> Show All</p>
      </div>
  </a>

    <input id="major" type="text">

  <a href="" onclick="filterM()">
        <div class="buttons">
            <p>Filter by Major</p>
        </div>
  </a>

      <input id="course" type="text">

  <a href="" onclick="filterC()">
    <div class="buttons">
            <p>Filter by Course</p>
        </div>
  </a>

</div>

<script>

  function showAll(){
    var xmlhttp;
    if(window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function(){
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
        var mesgs = document.getElementById("entries");
        mesgs.innerHTML = xmlhttp.responseText;
        document.getElementById("button_all").style.display = "none";
      }
    }
    xmlhttp.open("GET","queryEntries.php?show=all", true);
    xmlhttp.send();
  }

  function filterM() {
    var xmlhttp;
    var majorName = document.getElementById("major").value;
    alert("filterM() has been clicked and majorName is " + majorName);
    if(window.XMLHttprequest) {
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        var mesgs = document.getElementById("entries");
        mesgs.innerHTML = xmlhttp.responseText;
        document.getElementById("button_all").style.display = "block";
      }
    }
    xmlhttp.open("GET", "queryEntries.php?show=major&value=" + majorName, true);
    xmlhttp.send();
  }

function filterC() {
  alert("filterC() had been clicked");
  var xmlhttp;
  var courseName = document.getElementById("course");
  if(window.XMLHttprequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
      var mesgs = document.getElementById("entries");
      mesgs.innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET", "queryEntries.php?show=course&value=" + courseName, true);
  xmlhttp.send();
  document.getElementById("button_all").style.display = "block";
}

    </script>
   </body>
</html>

PHP

<?php

$db_server = "...";
$db_user = "...";
$db_pwd = "...";

// Create connection
$conn = mysqli_connect($db_server, $db_user, $db_pwd) or die('Connection failed! ' . mysqli_error($conn));

// Select database
mysqli_select_db($conn, "h3517511") or die("Selection failed! " . mysqli_error($conn));

// Construct SQL query
echo "The show is: " . $_GET['show'] . "<br>";
echo "The value is: " . $_GET['value'];
$query = 'SELECT * FROM attendanceList';

if ($_GET['show'] == "major") {
    echo "MAJOR";
    $query = 'SELECT * FROM attendanceList WHERE major = "'.$_GET['value'].'" ';
}

if ($_GET['show'] == "course") {
    echo "COURSE";
    $query = 'SELECT * FROM attendanceList WHERE course = '.$_GET['value'].' ';
}

// Execute SQL query
$result = mysqli_query($conn, $query) or die('Query execution failed! ' . mysqli_error($conn));

while($row = mysqli_fetch_array($result)){
    print "<div id=".$row['id'].">";
    print "<span>".$row['attendOrNot']."</span>";
    print "<h3>".$row['studentname']." (".$row['major'].")</h3>";
    print "<h5>(".$row['course'].") on ".$row['coursedate']." </h5>";
    print "</div>";
}

    ?>

Answer 1

试试下面的代码，它是基于你的代码，但只使用一个带变量的 JS 函数，易于控制和调试。

这是主要代码:

<div id="List">
    <div id="entries"></div>

    <input id="all" type="hidden" value="all">
    <a onclick="submitFilters('all', 'none')">
        <div id="button_all" class="buttons">
            <p>Show All</p>
        </div>
    </a>

    <input id="major" type="text">
    <a onclick="submitFilters('major', 'block')">
        <div class="buttons">
            <p>Filter by Major</p>
        </div>
    </a>

    <input id="course" type="text">
    <a onclick="submitFilters('course', 'block')">
        <div class="buttons">
            <p>Filter by Course</p>
        </div>
    </a>
</div>

<script>

function submitFilters(name, buttonDisplay){
    var xmlhttp;
    var value = document.getElementById(name).value;
    alert(name + " has been clicked and value is " + value);

    if(window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
    } else {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function(){
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        var mesgs = document.getElementById("entries");
        mesgs.innerHTML = xmlhttp.responseText;
        document.getElementById("button_all").style.display = buttonDisplay;
      }
    }
    xmlhttp.open("GET", "queryEntries.php?show=" + name + "&value=" + value, true);
    xmlhttp.send();
}

</script>

编辑:

我清除了使用“onclick”时不需要的“href”属性。如果您想要经典的链接样式，请将此 block 添加到您的 HTML 中:

<style>
a {
    text-decoration: underline;
    cursor: pointer;
    color: blue;
}
</style>