前端html表单数据使用ajax发送json到后端springboot，代码展示与步骤讲解

前端代码：

1. 定义html表单，使用form标签包裹

<form id="myForm" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"><br><br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password"><br><br>
  <button type="submit" id="submitBtn">提交</button>
</form>

2. 监听表单提交事件，使用jquery发送ajax请求

$('#myForm').submit(function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  var formData = {
    'username': $('input[name=username]').val(),
    'password': $('input[name=password]').val()
  };
  $.ajax({
    type: 'POST',
    url: '/api/login',
    data: JSON.stringify(formData),
    dataType: 'json',
    contentType: 'application/json',
    success: function(data) {
      console.log(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log(jqXHR.responseText);
    }
  });
});

后端代码：

1. 定义接收请求的controller方法

@RestController
@RequestMapping("/api")
public class LoginController {

  @PostMapping("/login")
  public ResponseEntity<?> login(@RequestBody Map<String, String> request) {
    String username = request.get("username");
    String password = request.get("password");
    // 处理登录逻辑
    return ResponseEntity.ok("登录成功");
  }
}

2. 使用@RequestBody注解接收json数据，并使用ResponseEntity返回响应数据

@PostMapping("/login")
public ResponseEntity<?> login(@RequestBody Map<String, String> request) {
  String username = request.get("username");
  String password = request.get("password");
  // 处理登录逻辑
  return ResponseEntity.ok("登录成功");
}

步骤讲解：

1. 定义html表单，使用form标签包裹。
2. 监听表单提交事件，阻止表单默认提交行为，获取表单数据，使用jquery发送ajax请求。
3. 后端定义接收请求的controller方法，使用@RequestBody注解接收json数据。
4. 处理接收到的数据，返回响应数据。在本例中，使用ResponseEntity.ok()方法返回登录成功信息。