单击行中的切换按钮时，如何从 mysql select 生成的 php 表中发布？

Posted 2023-05-09

【中文标题】单击行中的切换按钮时，如何从 mysql select 生成的 php 表中发布？

【英文标题】：How to POST from php table generated by mysql select when toggle btn in row is clicked?

【发布时间】：2021-10-10 23:27:43

【问题描述】：

我有一个 php 页面，它从 mysql 选择语句中检索数据以填充 html 表的 8-12 行。每行都有一个服务器名称和一个由引导切换开关表示的状态，用于打开或关闭条件。切换切换时，我想将该服务器的服务器名称和所需状态发布到 action.php。我能够使用我发现的一些 AJAX 脚本来获取 POST 信息以将条件从 1 更改为 2，但仅限于最后一行。我无法弄清楚如何将每一行的服务器名获取到脚本中。我怎样才能做到这一点？

<table class="table table-hover" >
  <thead>
    <tr>
      <th class="all"> Server </th>
      <th class="all"> Status </th>
    </tr>
  </thead>
  <tbody>
    <?php
      include '../includes/DBConn.php';
    
      $sql="SELECT name FROM ServerList WHERE active = 1 AND location = 3";
      $result = $conn->query($sql);
    
      if ($result->num_rows > 0) 
        // output data of each row
        while($row = $result->fetch_assoc()) 
          $ServerName = $row['name'];
          ?>
          <tr>
            <td> <?php echo $ServerName;?> </td>
            <td> 
              <?php 
                if($condition1 !== false ) 
                ?>
                <input id="toggle-event" checked type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-size="small" >
               <?php
               elseif($condition2 == false) 
               ?>
                 <input id="toggle-event" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-size="small">
               <?php
               
               ?>
             </td>
          </tr>
          <?php        
         
       else 
         echo "0 results";
       
       $conn->close();
       ?>                
  </tbody>
</table>

我对 ajax 的尝试。这将 POST 到最后一行的所需页面，并且仅在选中切换时（条件 1）。

<table class="table table-hover">
  <thead>
    <tr>
      <th class="all"> Server </th>
      <th class="all"> Status </th>
    </tr>
  </thead>
  <tbody>
  <?php
    include '../includes/DBConn.php';
                
    $sql="SELECT name FROM ServerList WHERE active = 1 AND location = 3";
    $result = $conn->query($sql);
                
    if ($result->num_rows > 0) 
      // output data of each row
      while($row = $result->fetch_assoc()) 
        $ServerName = $row['name'];
        ?>
        <tr>
          <td> <?php echo $ServerName;?> </td>
          <td> 
          <?php 
          if($condition1) !== false ) 
          ?>
            <form id="toggle-form1-<?php echo $ServerName; ?>" name="myForm" action="action.php" method="post">
            <input id="toggle-event1<?php echo $ServerName;?>" checked type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-size="small">
            </form>
            <div id="console-event"></div>
            <script> var serverName = '<?=$ServerName?>';</script>
          <?php
          elseif($condition2) == false) 
          ?>
            <input id="toggle-event2" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-size="small">
          <?php
          
          ?>
        </td>
      </tr>
      <?php        
     
   else 
      echo "0 results";
   
   $conn->close();
   ?>                
 </tbody>

<script>
  $(function() 
    $('#toggle-event1' + serverName).change(function() 
      $('#console-event').html('Toggle: ' + $(this).prop('checked'));
      console.log(serverName);
      var mode= $(this).prop('checked');
     
      $.post("/action.php", 
        mode:mode,
        desire:0,
        server:serverName,
      );
    )
  )
</script>

【问题讨论】：

在循环中使用 id 的好处，解决方法是将其添加到 data-server-name="<?=$ServerName?>"，然后使用像 $('input[data-toggle="toggle"]') 这样的 jquery 点击选择器，然后在点击事件中从 $(this).data('server-name') 中获取服务器名称

您的第一个示例引用$condition1 和$condition，而您的第二个示例引用$condition1 和$condition2。目前尚不清楚这些设置在哪里或如何设置，或者它们意味着什么。此外，您的第二个示例有许多语法错误，进一步混淆了事情。也许你可以澄清一些。我有一个明确问题的答案。

【参考方案1】：

在你的while循环中：

<script> var serverName = '<?=$ServerName?>';</script>

这就是为什么最后一个只被捡起的原因。

<script>
    $(function() 
        $('.toggle-event').change(function() 
            var serverName = $(this).data('server-name');
            var mode = $(this).prop('checked');

            $(this).siblings('.console-event').html('Toggle: ' + mode);

            console.log(serverName);


            $.post("/action.php", 
                mode:mode,
                desire:0,
                server:serverName,
            );
        )
    )
</script>

<table class="table table-hover" >
    <thead>
    <tr>
        <th class="all"> Server </th>
        <th class="all"> Status </th>
    </tr>
    </thead>
    <tbody>
    <?php include '../includes/DBConn.php';

    $sql="SELECT name FROM ServerList WHERE active = 1 AND location = 3";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) 
        // output data of each row
        while($row = $result->fetch_assoc()) ?>
            <tr>
                <td> <?php echo $row['name'];?> </td>
                <td>
                    <input data-server-name="<?php echo $row['name']?>" class="toggle-event" <?php echo ($condition1 !== false) ? "checked" : "" ?> type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-size="small" />
                    <div class="console-event"></div>
                </td>
            </tr>
            <?php
        
     else 
        echo "0 results";
    
    $conn->close();
    ?>
    </tbody>
</table>