如何将GET请求返回的表格行内容通过POST提交至服务器？

嘿，我明白你现在的困扰——你已经把XML接口返回的数据渲染成了表格，还给每行都加了提交按钮，但不知道怎么把对应行的内容打包通过POST请求发回服务器，对吧？别担心，咱们一步步来搞定这个问题。

核心思路 #

要实现这个功能，咱们需要做三件事：

• 给每个按钮绑定专属的点击事件，确保点击时能拿到对应行的数据
• 从目标行里提取需要提交的数据
• 用XMLHttpRequest把数据以POST方式发送给服务器

修改后的完整代码示例 #

我先把你的代码补全并修改，你可以根据自己的XML结构调整细节：

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "URL OF SERVER", true);
  xhttp.send();
}

function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  // 创建表格元素
  var table = document.createElement("table");
  // 假设你的XML里每行数据的节点是<row>，根据实际情况修改
  var rows = xmlDoc.getElementsByTagName("row");

  for (i = 0; i < rows.length; i++) {
    var tr = document.createElement("tr");

    // 1. 渲染表格数据（这里假设每行有两个数据字段，根据你的XML调整）
    var tdData1 = document.createElement("td");
    tdData1.textContent = rows[i].getElementsByTagName("data1")[0].textContent;
    tr.appendChild(tdData1);

    var tdData2 = document.createElement("td");
    tdData2.textContent = rows[i].getElementsByTagName("data2")[0].textContent;
    tr.appendChild(tdData2);

    // 2. 创建提交按钮并绑定点击事件
    var submitBtn = document.createElement("button");
    submitBtn.textContent = "提交该行";
    
    // 用闭包保存当前行的引用，避免循环绑定错误
    submitBtn.onclick = (function(currentRow) {
      return function() {
        submitRowToServer(currentRow);
      };
    })(tr);

    var tdBtn = document.createElement("td");
    tdBtn.appendChild(submitBtn);
    tr.appendChild(tdBtn);

    table.appendChild(tr);
  }

  // 把表格添加到页面中（你可以改成添加到指定容器）
  document.body.appendChild(table);
}

// 处理行数据提交的函数
function submitRowToServer(row) {
  // 3. 提取当前行的数据
  var rowData = {};
  var cells = row.getElementsByTagName("td");
  
  // 假设前两个td是需要提交的数据，第三个是按钮，根据你的表格结构调整索引
  rowData.data1 = cells[0].textContent;
  rowData.data2 = cells[1].textContent;

  // 4. 发送POST请求到服务器
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4) {
      if (this.status == 200) {
        alert("提交成功！");
        // 这里可以添加成功后的逻辑，比如刷新表格、高亮该行等
      } else {
        alert("提交失败，请稍后重试");
      }
    }
  };

  xhttp.open("POST", "你的POST接口URL", true);
  // 根据服务器要求设置请求头，如果服务器接受表单数据就用application/x-www-form-urlencoded
  xhttp.setRequestHeader("Content-Type", "application/json");
  // 把数据转成JSON字符串发送（如果是表单格式就转成data1=xxx&data2=yyy）
  xhttp.send(JSON.stringify(rowData));
}

关键细节说明 #

1. 闭包的使用：
   为什么要用立即执行函数包裹点击事件？因为for循环里的tr是循环变量，直接绑定的话所有按钮都会指向最后一行。用闭包把当前行的引用保存下来，每个按钮才能拿到自己对应的行数据。

2. 数据收集的灵活调整：
   如果你的表格结构不一样，比如有更多数据列，或者需要提交的是隐藏字段，只需要修改submitRowToServer里的单元格索引，或者从行的其他元素里提取数据就行。

3. 请求格式适配：
   如果你的服务器不接受JSON格式，就把请求头改成application/x-www-form-urlencoded，然后把数据转成表单格式：

   var formData = `data1=${encodeURIComponent(rowData.data1)}&data2=${encodeURIComponent(rowData.data2)}`;
   xhttp.send(formData);
   

4. 更简单的替代方案：
   你也可以把数据直接存在按钮的自定义属性里，不用找行：

   // 创建按钮时
   submitBtn.dataset.data1 = rows[i].getElementsByTagName("data1")[0].textContent;
   submitBtn.dataset.data2 = rows[i].getElementsByTagName("data2")[0].textContent;
   // 绑定点击事件
   submitBtn.onclick = function() {
     var rowData = {
       data1: this.dataset.data1,
       data2: this.dataset.data2
     };
     // 发送请求的逻辑和之前一样
   };
   

这样调整后，点击每行的按钮就能把对应行的数据正确提交回服务器啦！

内容的提问来源于stack exchange，提问作者varun bhat