php - 无法使用 AJAX 从 PHP 生成的 Bootstrap 选项卡中检索数据

Question

所以我有一个选择框，它会触发 AJAX 调用以从显示 Bootstrap 选项卡的 MYSQL 检索信息。我正在尝试再次调用 AJAX 以根据每个选项卡的值显示内容，但似乎无法返回结果。

以下是生成选项卡的部分代码:

$result= $conn->query($sql);
if ($result->num_rows > 0) {
echo"
<div id=\"tabs\">
    <ul class=\"nav nav-tabs\">";
    while($row = $result->fetch_assoc()) {
    echo"
        <li class=\"nav-item\">
        <a class=\"nav-link\" id=\"gruppo\" value=\"".$row["id_gruppo"]."\" data-toggle=\"tab\" href=\"#".$row["id_gruppo"]."\">".$row["nome_gruppo"]."</a>
        <div id=\"show1\"></div>
        </li>";
      }
    echo"</ul></div>";
}

这是我附带的 AJAX 代码:

<script type="text/javascript">
  $(document).ready(function(){ 
    $("#gruppo").change(function(){ 
      var id_gruppo = $(this).val(); 
      var dataString = "id_gruppo="+id_gruppo; 

      $.ajax({ 
        type: "POST",
        url: "getData.php",
        data: dataString,
        success: function(result){
          $("#show1").html(result);
        }
      });

    });
  });
</script>

只是为了测试是否发生任何情况，这是页面 getData.php 的代码

 if(!empty($_POST["id_gruppo"]))
 {
  $id_gruppo=$_POST["id_gruppo"];
  echo"Gruppo:".$id_gruppo;
 }

Answer 1

您对多个标签使用相同的 ID，因此不会触发事件:

... <a class=\"nav-link\" id=\"gruppo\"> ...

试试这个:首先像这样定义你的函数:

function doThisOnChange(id){ 
  var id_gruppo = id; 
  var dataString = "id_gruppo="+id_gruppo; 

  $.ajax({ 
    type: "POST",
    url: "getData.php",
    data: dataString,
    success: function(result){
      $("#show1").html(result);
    }
  });

}

然后你的 PHP 部分就变成:

...
  while($row = $result->fetch_assoc()) {
    echo"
            <li class=\"nav-item\">
                <a class=\"nav-link\" id=\"gruppo-".$row["id_gruppo"]."\" value=\"".$row["id_gruppo"]."\" onChange=\"doThisOnChange(".$row["id_gruppo"].") \"
data-toggle=\"tab\" href=\"#".$row["id_gruppo"]."\">".$row["nome_gruppo"]."</a>
                <div id=\"show1\"></div>
            </li>";
  }

...