js实现接收表单的值并将值拼在表单action后面的方法

实现接收表单的值并将值拼在表单action后面的方法，可以通过以下步骤来完成：

1. 使用 HTML 表单标签创建表单，并指定表单的 action 和 method 属性以及 input 标签来定义表单项。

<form action="submit.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

1. 使用 JavaScript 获取表单元素的值，并将值拼接到表单的 action 后面。

var formElement = document.querySelector('form');
formElement.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  var name = document.querySelector('#name').value;
  var email = document.querySelector('#email').value;
  formElement.action += '?name=' + encodeURIComponent(name) + '&email=' + encodeURIComponent(email);
  formElement.submit();
});

这里，我们使用事件监听器 addEventListener 来监听表单提交事件，阻止了默认的表单提交行为。获取表单元素的值时，我们使用了 document.querySelector() 方法来获取指定 ID 的表单元素的值，并使用 encodeURIComponent() 方法对值进行编码，以避免出现 URL 编码问题。最后，我们将拼接好的表单 action 赋值给表单元素的 action 属性，并调用表单的 submit() 方法来提交表单。

以下是两个运用本方法的具体示例：

1. 示例一：以 GET 方式提交表单

<form id="demo-form" action="submit.php" method="get">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

<script>
var formElement = document.querySelector('#demo-form');
formElement.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  var name = document.querySelector('#name').value;
  var email = document.querySelector('#email').value;
  formElement.action += '?name=' + encodeURIComponent(name) + '&email=' + encodeURIComponent(email);
  formElement.submit();
});
</script>

在这个示例中，我们设置了表单的 method 属性为 GET，以便通过 URL 参数传递表单数据。在表单提交事件的处理函数中，我们获取表单元素的值并拼接到表单的 action 后面，使用 encodeURIComponent() 方法进行编码并将编码后的值作为 URL 参数传递。

1. 示例二：以 POST 方式提交表单

<form id="demo-form" action="submit.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
</form>

<script>
var formElement = document.querySelector('#demo-form');
formElement.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  var name = document.querySelector('#name').value;
  var email = document.querySelector('#email').value;
  var formData = new FormData();
  formData.append('name', name);
  formData.append('email', email);
  var xhr = new XMLHttpRequest();
  xhr.open('POST', formElement.action);
  xhr.send(formData);
});
</script>

在这个示例中，我们设置了表单的 method 属性为 POST，以便通过表单数据体传递表单数据。在表单提交事件的处理函数中，我们获取表单元素的值并使用 FormData() 方法创建一个表单数据对象。使用 append() 方法向表单数据对象中添加表单数据并使用 XMLHttpRequest 对象进行表单提交。