OnSubmit 方法准备要在操作上发送的数据答案

【问题标题】：OnSubmit method to prepare data to be sent on an actionOnSubmit 方法准备要在操作上发送的数据
【发布时间】：2021-02-02 02:05:20
【问题描述】：

这将是问题 [A form's “action” and “onsubmit”: which first executes?][1] 的后续问题这里得出的结论是 onSubmit 先运行，然后提交表单的动作完成。

我想编写我的 onSubmit 方法来清理将要发送的 POST 提交；有没有办法修改将发送到服务器的 POST 消息，而不是通过更改字段的值，而是通过它的组成？

例如，我的表单包含两个字段，姓名和姓氏。提交操作最终会发送一个 POST 正文，例如：

name=John&surname=Doe

但我希望 POST 正文是

fullname=John_Doe

我实际上对如何解决这个问题一无所知，所以任何关于在哪里查找有关此问题的文档的提示都值得赞赏 - 我不想窃取可以做到这一点的代码，但有一些提示在哪里开始。

谢谢！ [1]：A form's "action" and "onsubmit": Which executes first?_

【问题讨论】：

标签： javascript post form-submit

【解决方案1】：

您可以通过在发送请求之前修改表单数据来实现此目的。
但您需要自己发送请求。

const form = document.querySelector("form");

form.addEventListener("submit", e => {
  e.preventDefault();

  let preparedData = new FormData(form);
  preparedData.append(
    "fullName",
    `${preparedData.get("firstName")} ${preparedData.get("lastName")}`
  );

  console.log("Fullname: " + preparedData.get("fullName"));
  var request = new XMLHttpRequest();
  request.open("POST", "http://example.com/submitform.php");
  request.send(preparedData);
});

示例： https://stackblitz.com/edit/js-yia2yg?file=index.js

【讨论】：

【解决方案2】：

要停止表单操作，您可以调用 onSubmit 方法：

<form action="/action_page.php" onsubmit="myFunction()">
  Enter first name: <input type="text" name="fname">
  Enter last name: <input type="text" name="lname">
  <input type="submit" value="Submit">
</form>

function myFunction(evt) { 
  evt.preventDefault();

  let data = {
    fullname: //place the data you need to send here
  };

  fetch("/post/data/here", {
    method: "POST", 
    body: JSON.stringify(data)
  }).then(res => {
    console.log("Request complete! response:", res);
  });
};

【讨论】：