提交表单后URL被追加Date参数，请求解决方案

这个问题我之前碰到过，核心原因基本都是表单提交方式或者参数配置的问题，给你几个可行的解决思路：

• 检查表单提交方法与控制器注解
  如果你的表单用的是GET方法提交，所有表单字段都会自动拼到URL的查询参数里。你需要把表单的method设置为POST，同时确保控制器方法使用对应的POST请求注解（比如Spring的@PostMapping）。
  示例表单代码：

  <form action="/employee/1" method="POST">
      <input type="month" name="date" value="2018-02">
      <button type="submit">提交</button>
  </form>
  

  对应的Spring控制器方法：

  @PostMapping("/employee/{id}")
  public String updateEmployee(@PathVariable Long id, @RequestParam String date) {
      // 业务处理逻辑
      return "success";
  }
  

  这样参数会放在请求体中，不会出现在URL上。

• 调整参数传递方式（若必须用GET）
  如果因为业务限制必须使用GET方法，又不想Date字段出现在URL的查询参数里，可以考虑将Date作为路径变量的一部分。调整URL结构为/employee/1/{date}，并在控制器中用@PathVariable接收参数：

  @GetMapping("/employee/{id}/{date}")
  public String getEmployee(@PathVariable Long id, @PathVariable String date) {
      // 业务处理逻辑
      return "employee-detail";
  }
  

  此时提交后的URL会变成http://localhost:8080/employee/1/2018-02，符合路径式的参数传递，而非查询参数。

• 使用AJAX异步提交
  要是想保留页面不刷新的交互体验，或者更灵活地控制参数传递，可以用AJAX来提交表单。示例用原生JavaScript实现：

  const form = document.querySelector('form');
  form.addEventListener('submit', function(e) {
      e.preventDefault(); // 阻止默认表单提交行为
      const dateInput = document.querySelector('input[name="date"]');
      const formData = new FormData();
      formData.append('date', dateInput.value);
      
      fetch('/employee/1', {
          method: 'POST',
          body: formData
      }).then(response => {
          // 处理响应结果
          console.log('提交成功');
      });
  });
  

  这种方式下，Date参数会放在请求体中，URL不会被追加任何内容。

• 检查控制器参数接收配置
  确认你的控制器方法没有错误地将Date字段标记为查询参数。比如如果控制器方法是这样的：

  @GetMapping("/employee/{id}")
  public String getEmployee(@PathVariable Long id, @RequestParam String date) {
      // ...
  }
  

  只要请求中携带date参数，就会自动拼到URL上。如果这个Date参数并非必要，可以直接移除@RequestParam String date；如果确实需要但不想放在URL里，就切换为POST方法接收。

内容的提问来源于stack exchange，提问作者Maciaz