前端中onsubmit函数与后台gin交互

在前端中，可以通过使用JavaScript来实现表单的提交，并且可以将表单数据转换成JSON格式，并通过AJAX技术向后台发送POST请求。下面是一个简单的例子：

<form id="my-form">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="Submit">
</form>

<script>
  // 获取表单元素
  const form = document.getElementById('my-form');
  
  // 监听表单提交事件
  form.addEventListener('submit', handleSubmit);

  // 处理表单提交事件
  function handleSubmit(event) {
    // 阻止表单默认提交行为
    event.preventDefault();
    
    // 获取表单数据
    const formData = new FormData(event.target);
    const json = JSON.stringify(Object.fromEntries(formData.entries()));
    
    // 向后台发送请求
    fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: json
    })
    .then(response => response.text())
    .then(data => {
      // 处理响应
      alert(data);
    })
    .catch(error => {
      // 处理错误
      alert(error);
    });
  }
</script>

在这个例子中，我们首先获取了表单元素，并通过addEventListener函数监听表单提交事件。当表单提交时，我们通过preventDefault函数阻止了表单的默认提交行为，并通过FormData对象获取了表单数据。然后，我们将表单数据转换成JSON格式，并使用fetch函数向后台发送POST请求。发送请求后，我们通过then函数处理响应，并将其作为弹窗显示给用户。