使用 JavaScript 单击按钮时如何发送行数据？

在 Web 开发中，我们经常需要在用户单击按钮时将行数据发送到服务器。这在数据表格、表单和网格视图等场景下很常见。本文将介绍如何在 JavaScript 中实现这个功能。

准备工作

首先，我们需要在 HTML 页面中添加一个表格或列表。假设这个表格的 ID 为 myTable，其中每一行都包含一个名为“发送”的按钮：

<table id="myTable">
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td><button onclick="sendRowData(this)">Send</button></td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Smith</td>
    <td><button onclick="sendRowData(this)">Send</button></td>
  </tr>
  <!-- more rows... -->
</table>

编写 JavaScript 函数

接下来，我们编写一个 JavaScript 函数，当用户单击按钮时调用该函数。该函数需要获取当前单元格所在行的数据，并将其发送到服务器。

首先，我们需要获取当前单元格所在行的 td 元素：

function sendRowData(button) {
  var row = button.parentNode.parentNode;
  }

然后，我们可以从行对象中获取每个 td 元素的文本内容，并将其组合成一个 JSON 对象或 URL 编码的字符串。这里我们使用 JSON 对象：

function sendRowData(button) {
  var row = button.parentNode.parentNode;
  var data = {
    firstName: row.cells[0].textContent,
    lastName: row.cells[1].textContent
    // add more properties as needed
  };
}

接下来，我们需要使用 AJAX 或表单提交将数据发送到服务器。这里我们使用 AJAX：

function sendRowData(button) {
  var row = button.parentNode.parentNode;
  var data = {
    firstName: row.cells[0].textContent,
    lastName: row.cells[1].textContent
    // add more properties as needed
  };
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/sendRowData');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onload = function() {
    if (xhr.status === 200) {
      alert('Data sent successfully!');
    } else {
      alert('Error sending data.');
    }
  };
  xhr.send(JSON.stringify(data));
}

这个函数中，我们使用 XMLHttpRequest 对象创建一个 POST 请求，并设置请求头的 Content-Type 属性为 application/json。然后，我们设置 onload 回调函数，该函数在请求完成时执行。如果请求状态为 200，则提示数据发送成功，否则提示发送错误。最后，我们将数据转换为 JSON 字符串并发送请求。

结论

通过上述步骤，我们可以在 JavaScript 中实现发送行数据的功能。这个功能常用于数据表格、表单和网格视图等场景下。在实现时，我们需要编写一个 JavaScript 函数，获取当前单元格所在行的数据，并将其发送到服务器。可以使用 AJAX 或表单提交来发送数据。