AJAX-如何查询特定表行答案

【问题标题】：AJAX- how to query a specific table rowAJAX-如何查询特定表行
【发布时间】：2020-04-28 12:42:48
【问题描述】：

我对 ajax 比较陌生，目前我正在制作一个任务管理器表，它通过 sql 查询将新行添加到表中。但是，我想使用 ajax 将用户想要完成的任何任务的状态从“未完成”更改为“完成”。问题是我不太确定我将如何引用被引用的新表行，因为现在它只引用 rable 行的第一个实例。

下面是我的表格和 ajax。

 <?php while ($row = mysqli_fetch_assoc($tasks)) : ?>

                <tr class="task-table-row" style="background-color:<?php echo $table ?>">
                    <td class="rounded" style="height:40px; overflow:hidden">
                        <?php echo $row["taskTitle"] ?>
                    </td>
                    <td class="rounded" id="taskBodyS">
                        <?php echo $row["taskBody"]; ?></td>
                    <td class="rounded"><?php echo $row['taskDate']; ?></td>
                    <td class="state">
                        <a id="stateTick" onclick="completeTask()" method="GET"
                            action="index.php?complete_task=<?php echo $row['taskID']; ?>">Test</a>
                    </td>
                    <td>
                        <div id="del"><a style="color:red"
                                href="index.php?del_task=<?php echo $row['taskID']; ?>">Delete
                            </a>
                            <button style="color:red; background:none; border:none; cursor:pointer">Edit
                            </button>
                    </td>
                    <td style="display:none;"><?php echo $row['taskID']; ?></td>
                </tr>
                <?php endwhile; ?>
            </table>

function completeTask() {
  var xmlHttp = new XMLHttpRequest(); //instance of HTTP request
  xmlHttp.open("GET", "includes/query.php", false);
  xmlHttp.send(null);
  var elmt = document.getElementById("stateTick");
  elmt.innerHTML = xmlHttp.responseText;
}

【问题讨论】：

你需要通过ajax或<a>传递值吗？
我假设它会通过 ajax，因为为了改变状态，它需要引用一个特定的 id。但我不太确定这怎么可能

标签： php ajax

【解决方案1】：

您可以在函数中传递 id 的值，然后将其发送到 ajax 。即：<a> 标签如下所示：

<a id="stateTick" onclick="completeTask(<?php echo $row['taskID'];?>)">Test</a>

您的 ajax 代码如下所示：

function completeTask(id) {
  var xmlHttp = new XMLHttpRequest(); //instance of HTTP request
  xmlHttp.open("GET", "includes/query.php?id="+id, false);//passing id
  xmlHttp.send(null);
  var elmt = document.getElementById("stateTick");
  elmt.innerHTML = xmlHttp.responseText;
}

然后在你的 php 端使用$_GET['id'] 获取这个id。

【讨论】：