时间戳

首页 > 解决方案 > 如何将 PHP 回显按钮的文本提取到 Javascript 中，其值将用于另一个 PHP Sql 查询？

javascript - 如何将 PHP 回显按钮的文本提取到 Javascript 中，其值将用于另一个 PHP Sql 查询？

问题描述

我有一个返回表的 PHP sql 查询。

while($row = $result->fetch_assoc()) {
                echo "<tr><td id=\"cst\"><button type=\"submit\" id=\"click\" onClick=sendData(this)>".$row["Name"]</button></td></tr>";

表格输出正确。我的下一步是使用 vanilla Javascript 从输出表中的按钮中提取与 $row["Name"] 关联的 HTML 文本值（单击按钮时）。我调用函数 onClick=sendData(this)

现在，在 Javascript 中，我尝试像这样访问文本值：

function sendData(name) {
    var text = name.innerText;
}

但是，这是行不通的。谁能解释为什么？

标签： javascriptphphtml

解决方案

您在这里如何使用 PHP 和 JavaScript 来解决这个问题存在多个问题。让我分解它们，以及我们如何最好地解决它们。

  1. 您的 ID 是相同的：当您遍历表中的行时，您并没有为它们设置唯一的 ID。这意味着如果您稍后尝试通过 JavaScript 以任何身份引用它们，您将无法做到。相反，您可以将其更改为类似， <td id=\"cst_$row['row_id']\".
  2. 您的 PHP 容易发生 SQL 注入：根据我看到您返回值的方式，您用来查询数据库的方法很可能容易发生 SQL 注入。您最好阅读Prepared Statements和PDO。
  3. 您的 onclick 周围没有引号：因为您没有将函数用引号括起来，它实际上甚至不会正确发送。但是，无论如何都有更好的解决方案。从您的按钮中删除 on-click，并添加一个事件侦听器。
  4. 您的按钮类型是提交：因为您已将按钮类型设置为提交，所以默认行为是刷新页面。如果你想保留它，你必须指定不使用默认行为，或者只是将按钮类型更改为按钮。

要解决所有这些问题（SQL 注入除外，因为这需要比提供的更多信息），您的代码可以更改为以下内容：

PHP：

while($row = $result->fetch_assoc()) {
                echo "<tr><td id=\"cst_$row['row_id']\"><button class=\"test_buttons\"type=\"button\" id=\"btn_$row['row_id']\"".$row["Name"]</button></td></tr>";

在上面的示例中，“row_id”是您在数据库表中的唯一标识符。将此更改为“id”或您在表格中调用的任何内容。

JavaScript： 

window.onload = function() {
  let buttons = document.getElementsByClassName("test_buttons"); // Get all buttons you want to search for
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function(event) { // On click of these buttons
      event.preventDefault(); // This is required only if you want to keep the button type of submit
      let text = this.textContent;
      alert(text);
    });
  }
}
<td><button type="button" class="test_buttons">Test 1</button></td>
<td><button type="button" class="test_buttons">Test 2</button></td>

推荐阅读