时间戳

首页 > 解决方案 > 为什么我无法在 AJAX 中获取表数据？每次我从表中获取 req_id 时，它都会在 Console.log 中给我未定义的值

javascript - 为什么我无法在 AJAX 中获取表数据？每次我从表中获取 req_id 时，它都会在 Console.log 中给我未定义的值

问题描述

我想获取 req_id，但每次我从表中获取 req_id 时，它都会在 Console.log() 中给我未定义。请在表数据 req_id 中查看，是的，数据库连接正常，我可以看到值。我尝试了 GET 和 POST 方法但我仍然得到同样的错误。我想要的只是获取 req_id 并将其显示在 console.log 中作为定义的值

谢谢你

<!-- main  -->
<section class="pad-70">
    <div class="container">
        <p id="demo"></p>
        <?php
        $userQuery = $connection->Show($conobj, "requested_car");
        if ($userQuery->num_rows > 0) {
            echo "<table><tr><th>Req ID</th><th>Action</th></tr>";
            // output data of each row
            while ($row = $userQuery->fetch_assoc()) {
                echo "<tr ><td id=req_id>";
                echo (htmlentities($row['req_id']));
                echo ("</td><td>");
                echo ('<button onclick="confirmcar()" class="btn btn-lg btn-success">Confirm</button> <button onclick="MyAjaxFunc()" class="btn btn-lg btn-danger">Cancel</button>');
                echo ("</td></tr>\n");
            }
            echo "</table>";
        } else {
            echo "0 results";
        }
        $connection->CloseCon($conobj);
        ?>
    </div>
</section>
<!-- main  -->

<script>
function confirmcar() {

    var req_id = document.getElementById("req_id").value;
    console.log(req_id);


}
</script>

标签： javascriptphpmysqlajax

解决方案

因此，从您上次的编辑开始，我删除了 PHP 并尝试模拟将生成多行的 HTML。

现在剩下几点：

  1. 您的属性值周围缺少引号req_id，如id="req_id". （正如@Quentin 在另一个答案中指出的那样，这不是一个真正的问题，但为了我们的眼睛，让我们保持整洁）
  2. 您正在使用on...html 属性设置事件处理程序，这是一种不好的做法。正如您将在下面看到的那样，使用 jsaddEventListener将有助于解决您的问题。
  3. 你的一个问题是你没有id在每一行为你的<td>. 如果您的 id 重复，则可能意味着您应该改用一个类。设置不同的 ID 可以简化点击时选择正确 ID 的过程。但这不是致命的，所以我们将从这里开始。

下面的代码片段说明了您应该如何继续获取值，该值<td>是单击“确认”按钮的表格行上 id 为“req_id”的内部文本：

  • 为这些按钮中的每一个添加一个事件侦听器，并在单击按钮时：
  • 爬上 DOM，直到你碰到它的父级<tr>
  • 在这一行中，<td id="req_id">通过其 id找到
  • 读取它的innerText属性

//When the DOM is fully loaded
window.addEventListener('DOMContentLoaded', _e => {
  //Find all buttons with class btn-success
  const buts = document.querySelectorAll('.btn-success');
  //Add a click handler to each one
  buts.forEach(button => {
    //When the button's clicked
    button.addEventListener('click', e => {
      //Find parent <tr>
      const tr = button.closest('tr');
      //Find child with id req_id and get its text
      const val = tr.querySelector('#req_id').innerText;
      console.log(val);
    });
  });
});
<section class="pad-70">
    <div class="container">
        <p id="demo"></p>
          <table>
            <tr>
              <th>Req ID</th><th>Action</th>
            </tr>
            <tr>
              <td id="req_id">My Value 1</td>
              <td>
                <button class="btn btn-lg btn-success">Confirm</button>
                <button class="btn btn-lg btn-danger">Cancel</button>
              </td>
            </tr>
            <tr>
              <td id="req_id">My Value 2</td>
              <td>
                <button class="btn btn-lg btn-success">Confirm</button>
                <button class="btn btn-lg btn-danger">Cancel</button>
              </td>
            </tr>
            <tr><td colspan="100">...</td></tr>
          </table>
    </div>
</section>

我使用事件window.DOMContentLoaded是为了让我的脚本仅在从 HTML 完全解析 DOM 后触发。否则，当尝试为它们分配事件处理程序时，这些按钮将不存在。

推荐阅读