XMLHttp 请求更新数据库中的数据

Question

我有一个带数据的 table，每个都有一个按钮（状态），我需要从输入中获取 ID、状态和当前并将其传递到 php 文件。

if(document.querySelectorAll('.statusBtn')) {
    document.querySelectorAll('.statusBtn').forEach(el=> {
            el.addEventListener('click', (e)=> {
                    e.preventDefault();

                    const send= {
                        id: document.querySelectorAll('.statusBtn').closest('tr').querySelector('input[name=id]').value,
                        status: document.querySelectorAll('.statusBtn').closest('tr').querySelector('input[name=status]').value,
                        token: document.querySelectorAll('.statusBtn').closest('tr').querySelector('input[name=token]').value
                    }

                    ;
                    const jsonString=JSON.stringify(send);
                    console.log(send['id']);
                    const xhr=new XMLHttpRequest();
                    xhr.open('POST', 'configs/appStatus.php', true);
                    xhr.setRequestHeader('Content-type', 'application/json');

                    xhr.onload=function() {
                        if (this.readyState==4 && this.status==200) {
                            document.querySelector(".textNotif").innerHTML=this.responseText;

                            var toastElList=[].slice.call(document.querySelectorAll('.toast')) var toastList=toastElList.map(function(toastEl) {
                                    // Creates an array of toasts (it only initializes them)
                                    return new bootstrap.Toast(toastEl) // No need for options; use the default options
                                }

                            );
                            toastList.forEach(toast=> toast.show()); // This show them
                        }

                        ;
                    }

                    ;
                    xhr.send(jsonString);
                }

            );
        }

    );
}

;

但是一直显示相同的id，如何正确使用closest()函数？查询大体上正确吗？

HTML:

<tbody>
        <?php while ($app = mysqli_fetch_assoc($applications)) { ?>
        <tr class="text-center">
          <td scope="row" class="text-white fw-bold <?php if($app['status'] == 1) {echo 'crossOut';}else{ echo '';}; ?>"><?= $app['id'] ?></td>
          <td class="text-white fw-bold overflow-hidden <?php if($app['status'] == 1) {echo 'crossOut';}else{ echo '';}; ?>"><?= $app['name'] ?></td>
          <td class="text-white fw-bold <?php if($app['status'] == 1) {echo 'crossOut';}else{ echo '';}; ?>"><?= $app['phone'] ?></td>
          <td class="text-white fw-bold <?php if($app['status'] == 1) {echo 'crossOut';}else{ echo '';}; ?>"><?= $app['created_at'] ?></td>
          <td>
            <form action="configs/appStatus.php" method="POST">
                <input type="hidden" name="token" value="<?= $_SESSION['token']; ?>">
                <input type="hidden" name="id" value="<?= $app['id']; ?>">
                <input type="hidden" name="status" value="<?php if($app['status'] == 1){echo '0';}else{echo '1';} ?>">
                <a href="#" class="scrollOffset btn btn-<?php if($app['status'] == 1){echo 'warning';}else{echo 'success';} ?> statusBtn"> <?php if($app['status'] == 1){echo 'Resume';}else{echo 'Complete';} ?></a>
            </form>
          </td>
        </tr>
      <?php }; ?>
      </tbody>

Answer 1

希望以下内容对您有用。

if (document.querySelectorAll(".statusBtn")) {
  document.querySelectorAll(".statusBtn").forEach((el) => {
    el.addEventListener("click", (e) => {
      e.preventDefault();

      const id = e.target.closest("tr").querySelector('td input[name="id"]')
        ? e.target.closest("tr").querySelector('td input[name="id"]').value
        : null;

      const status = e.target
        .closest("tr")
        .querySelector('td input[name="status"]')
        ? e.target.closest("tr").querySelector('td input[name="status"]')
            .value
        : null;

      const token = e.target
        .closest("tr")
        .querySelector('td input[name="token"]')
        ? e.target.closest("tr").querySelector('td input[name="token"]')
            .value
        : null;

      console.log(id, status, token);

      const send = {
        id: id,
        status: status,
        token: token,
      };

      // Remaining code here
    });
  });
}

XMLHttp 请求更新数据库中的数据

XMLHttp Request for Update Data in DB

javascript

ajax

xmlhttprequest