无法使用ajax从php生成的引导选项卡中检索数据

yiytaume 于 2021-06-21 发布在 Mysql

关注(0)|答案(3)|浏览(329)

所以我有一个选择框，它触发一个ajax调用，从显示引导选项卡的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;
 }

mysql php jquery ajax

来源：https://stackoverflow.com/questions/51283224/cant-retrieve-data-with-ajax-from-bootstrap-tabs-generated-with-php

3条答案

按热度按时间

uttx8gqw1#

因为bootstrap不知道 tab 元素进来了。通过调用 tab('show) ```
.ajax({
type: "POST",
url: "getData.php",
data: dataString,
success: function(result){
$("#show1").html(result);
$('.nav-item).tab('show');
}
});

赞(0）回复(0）举报 2021-06-21

ar5n3qh52#

多亏了@mabrouki fakhri，我找到了解决办法。
为每个选项卡调用的函数：

<script>
   function GetDataFromDB(id_gruppo){
        $.ajax({ /* THEN THE AJAX CALL */
            type: "POST", /* TYPE OF METHOD TO USE TO PASS THE DATA */
            url: "getData.php", /* PAGE WHERE WE WILL PASS THE DATA */
            data: "id_gruppo="+id_gruppo, /* THE DATA WE WILL BE PASSING */
            success: function(result1){ /* GET THE TO BE RETURNED DATA */
            $("#home").html(result1); /* THE RETURNED DATA WILL BE SHOWN IN THIS DIV */
        }
    });
}
</script>

生成每个选项卡的代码：

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\" onclick=\"GetDataFromDB(".$row["id_gruppo"].");\" value=\"".$row["id_gruppo"]."\" data-toggle=\"tab\" href=\"#".$row["id_gruppo"]."\">".$row["nome_gruppo"]."</a>
                </li>";
      }
            echo"
                </ul>
            </div>";
    }

赞(0）回复(0）举报 2021-06-21

vjrehmav3#

您对多个标记使用相同的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>";
  }

...

赞(0）回复(0）举报 2021-06-21

我来回答

无法使用ajax从php生成的引导选项卡中检索数据

3条答案

相关问题

热门标签

最新问答