用JavaScript写一个form表单收集数据提交和回显数据

好的，下面是一个简单的示例，使用 JavaScript 编写一个表单收集数据并提交，然后回显数据：

HTML 代码：

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required><br>

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required><br>

  <label for="message">留言：</label>
  <textarea id="message" name="message" rows="5" cols="40"></textarea><br>

  <button type="submit" id="submitBtn">提交</button>
</form>

<div id="result"></div>

JavaScript 代码：

const form = document.querySelector('#myForm');
const result = document.querySelector('#result');

form.addEventListener('submit', (event) => {
  event.preventDefault();  // 阻止表单默认提交行为

  const formData = new FormData(event.target);  // 获取表单数据

  // 向服务器发送数据，这里使用了 axios 库
  axios.post('/submit', formData)
    .then(response => {
      // 清空表单
      event.target.reset();
      // 显示提交结果
      result.textContent = '提交成功！';
      // 回显数据
      const data = response.data;
      result.innerHTML = `<p>姓名：${data.name}</p><p>邮箱：${data.email}</p><p>留言：${data.message}</p>`;
    })
    .catch(error => {
      console.error(error);
      result.textContent = '提交失败！';
    });
});

这个示例中，当用户点击提交按钮时，会触发表单的提交事件。我们使用 `FormData` 对象获取了表单中的数据，然后使用 axios 库向服务器发送了一个 POST 请求。在请求成功后，我们清空了表单，显示了提交结果，并回显了服务器返回的数据。