当用户提交表单时，我们可以使用JavaScript中的addEventListener方法或者onsubmit属性来绑定一个回调函数来实现代码逻辑。以下是实现步骤：

1. 编写HTML表单

首先需要编写一个HTML表单：

<form id="myForm">
  <input type="text" name="username" placeholder="请输入用户名" />
  <input type="password" name="password" placeholder="请输入密码" />
  <button type="submit">提交</button>
</form>

这个表单包含了两个输入框和一个提交按钮。

2. 编写JavaScript代码

接下来，我们需要编写一个JavaScript代码块来处理表单提交后的逻辑。这里我们会使用到两个方法：addEventListener和preventDefault。

const myForm = document.querySelector("#myForm");

myForm.addEventListener("submit", function(evt) {
  evt.preventDefault(); // 阻止表单提交默认行为

  // 你的代码逻辑
});

这里首先通过querySelector方法选中了表单元素，并使用addEventListener方法绑定了一个submit事件。事件处理函数中的evt参数表示事件对象，我们使用preventDefault方法阻止了表单提交的默认行为。

3. 在事件处理函数中实现代码逻辑

在事件处理函数中，我们可以编写具体的逻辑代码来处理表单提交后需要做的事情。以下是两个示例：

a. 获取表单数据

const myForm = document.querySelector("#myForm");

myForm.addEventListener("submit", function(evt) {
  evt.preventDefault();

  const form = evt.target;

  const username = form.elements.username.value;
  const password = form.elements.password.value;

  console.log(`用户名：${username}，密码：${password}`);
});

这个示例中，我们获取了表单元素和其中的两个输入框元素，并从输入框元素中取出了值。然后我们在控制台中输出了这些值。

b. 发起异步请求

const myForm = document.querySelector("#myForm");

myForm.addEventListener("submit", function(evt) {
  evt.preventDefault();

  const form = evt.target;

  const username = form.elements.username.value;
  const password = form.elements.password.value;

  fetch("/api/login", {
    method: "POST",
    body: JSON.stringify({ username, password }),
    headers: {
      "Content-Type": "application/json"
    }
  })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error(error);
    });
});

这个示例中，我们使用了fetch函数发起了一个异步请求（假设服务器端提供了一个/login的API接口），并将表单数据以JSON格式发送给了服务器端。当服务器返回响应时，我们在控制台中输出了响应数据，或者在出现错误时输出了错误信息。

以上就是“提交表单时执行func方法实现代码”的完整攻略。

本文链接：http://task.lmcjl.com/news/10452.html