Question

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

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

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

具体来说，无论我点击哪个按钮，程序总是从showAll（）函数发出一个GET请求。我知道这是因为我让PHP文件打印出GET请求参数，它总是说＆＃34; show＆＃34;参数等于＆＃34; all＆＃34;，当我希望参数等于＆＃34; major＆＃34;或＆＃34;当然＆＃34;。

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>

编辑：

我清理了“href”属性，使用“onclick”时不需要这些属性。如果您需要经典链接样式，请将此块添加到HTML：

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

Answer 2

确保您的PHP代码中的IF语句有效。试试这样：

if（trim（$ _ GET ['show']）===“major”）

~~使用var关键字定义xmlhttp。您定义它的方式是将其设置为全局，以便在刷新页面后始终具有第一个请求的值。~~

解决方案1：
张：这个：

xmlhttp = new XMLHttpRequest();

到此：

var xmlhttp = new XMLHttpRequest();

解决方案2：

在每个js函数中使用不同的名称，如xmlhttp1，xmlhttp2和xmlhttp3
..........................
我建议同时使用这两种解决方案，因为输入字段中的查询字可能会发生变化，所以在这种情况下单独使用解决方案2是不够的。

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

2 个答案: