javascript - 使用 JavaScript 访问 'post' 数据或检查使用哪个提交按钮提交表单

Question

考虑一个带有 2 个提交按钮的简单表单

<form method="post">
 <button type="submit" name="command" value="cancel">Cancel Order</button>
 <button type="submit" name="command" value="proceed">Save Order</button>
</form>

一旦提交，服务器将通过检查command 的值知道使用哪个提交按钮提交表单。 .太棒了!

在这种情况下，我使用的是 onsubmit表单的事件处理程序，以通过 AJAX 预处理和发送表单数据。像这样:<form method="post" onsubmit="return ajaxSubmit(this);">

我正在使用这个 ajaxSubmit用作检查任何提供的表单元素并通过 Ajax 发送数据的通用方法。这适用于确定文本字段的值，如果复选框被“选中”，在组中选择了哪个 radio 等。它似乎唯一出错的地方(因为我不确定如何检查这个)是哪个提交按钮用于提交表单。即 myForm["command"] 中没有任何内容告诉实际使用了 2 个命令按钮中的哪一个。

相反，有没有一种方法可以访问服务器在发送之前使用 JavaScript 接收到的相同“发布”数据？

否则，这只是我需要解决的缺陷吗？什么是最好的方法？

编辑: 由于所有现代浏览器都会传递用于提交表单的按钮的名称/值(以及其他相关部分，例如从组中选择哪个选项，选中的复选框名称/值等)任何人都可以解释为什么没有在将数据发送到服务器之前直接访问这些数据的方法？我们有什么理由不能这样做？

Answer 1

Instead, is there a way to access the same 'post' data that the server receives with JavaScript before it is sent?

不是那么准确的数据，不。

知道按下哪个 submit 按钮的通常方法是(不幸的是)将 click 处理程序附加到按钮并让它们设置一个变量(或一个值hidden 字段)，然后您可以在 submit 事件处理程序中检查它。

由于您使用的是旧式 DOM0 事件处理程序属性，hidden 字段可能更适合您的操作:

<form method="post">
 <input type="hidden" name="submitclicked" value="">
 <button type="submit" name="command" value="cancel" onclick="submitClick(this);">Cancel Order</button>
 <button type="submit" name="command" value="proceed" onclick="submitClick(this);">Save Order</button>
</form>

...其中 submitClick 看起来像这样:

function submitClick(button) {
    button.form.submitclicked.value = button.value;
}

...但我确实建议考虑使用 DOM2 样式的事件处理程序，或者至少在代码块中附加 DOM0 处理程序，因为您可以避免创建全局函数、在不创建全局变量的情况下共享数据等。

---

明确一点，您不必在每个元素上指定 onclick 属性，我在上面这样做的唯一原因是因为您使用的是 DOM0 处理程序。

处理它的更好方法是使用事件冒泡。由于 click 事件从其后代控件(包括提交按钮)冒泡到表单，您可以在表单上 Hook 该事件，然后查看它是否发生在提交按钮上，如果是的话，那个按钮的 value 是什么。

例如，这里有一个动态附加到表单的 DOM0 处理程序，它将提醒单击的提交按钮的值:

var form = document.getElementById("theForm");
form.onclick = function(e) {
  // Get the event
  e = e || window.event;

  // Did it originate in an input[type=submit]?
  if (e.target.tagName === "INPUT" &&
      e.target.type === "submit") {
    // Yes
    alert(e.target.value);
  }
};

Live Example | Source

或者在任何现代浏览器(不是 IE8 或更早版本的浏览器)上使用 DOM2 处理程序，但是为这些浏览器添加 attachEvent 会很容易，这与 addEventListener 所做的大致相同[并且早于它]):

document.getElementById("theForm").addEventListener("click", function(e) {
  // Did it originate in an input[type=submit]?
  if (e.target.tagName === "INPUT" &&
      e.target.type === "submit") {
    // Yes
    alert(e.target.value);
  }
}, false);

Live Example | Source

或者使用库使其更容易(这里是 jQuery，但大多数都有此功能，称为事件委托(delegate)):

$("#theForm").delegate("input[type=submit]", "click", function() {
  alert(this.value);
  return false;
});

Live Example | Source (我在那里使用 delegate 因为我喜欢它的清晰度；对于最新版本的 jQuery，您可以使用超重载的 on ，但不太清楚。如果您选择这样做，请注意参数的顺序不同。)

这里的重点是它并不复杂、困难或特别麻烦。

关于您编辑的结束问题:

...can anyone explain why there is no way to access this data directly before it is sent to the server?

可能不会，不会。重要的是要了解很多这些东西刚刚进化。与表单一起发送的提交按钮的值是 HTML 的东西，显然在执行 DOM HTML 表单模块时，任何人都没有想到说“嘿，我们应该在表单上有一个只在表单期间存在的属性提交事件，告诉您提交表单的内容。”可能有人应该想到，但显然没有。