如何用集合字段序列化表单数据并在服务器端反序列化？

Question

<form id="new-user-form">
  <label class="text-center col-form-label"><b>First Name:</b></label>
  <input type="text" id="firstname" name="firstname" value="" />

  <label class="text-center col-form-label"><b>Last Name:</b> </label>
  <input type="text" id="lastname" name="lastname" value="" />

  <label class="text-center col-form-label"><b>Age:</b></label>
  <input type="number" id="age" name="age" value="" />

  <label class="text-center col-form-label"><b>E-mail:</b></label>
  <input type="email" id="email" name="email" value="" />

  <label class="text-center col-form-label"><b>Password:</b></label>
  <input type="password" id="password" name="password" value="" />

  <label class="text-center col-form-label"><b>Role:</b></label>
  <select class="col-12 form-control" name="roles" multiple size="2">
    <option>ADMIN</option>
    <option>USER</option>
  </select>

  <button
    type="submit"
    id="submit-new-user"
    class="btn btn-primary btn-success"
  >
    Add new user
  </button>
</form>

因此，我需要从表单中获取用户数据，通过feth API将其发送到服务器，并将其放入数据库。

1. 第一个问题是：如何将表单数据序列化（使用js）到JSON，这意味着它具有由集合（角色）表示的值？我想，通过fetch发送的JSON对象应该如下所示:

{ “firstname”: “Bob”,
“lastname”: “Marley”,
    “age”: 30,
    “email”: “[e-mail]”,
    “password”: “password”,
    “roles”: [“ADMIN”, “USER”]  // or just [“USER”] or [“ADMIN”]
}

如何从表单中获取数据并获得这样的JSON？

Answer 1

这里有几件事需要考虑：

1-在提交之前，从JS文件中的表单内容创建一个JSON：

示例：

function onSubmit( form ){
  var data = JSON.stringify( $(form).serializeArray() );

  console.log( data );
  return false; //don't submit
}

  const response = await fetch("backend:8080/api/user", {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: data  // <-- Must be in JSON format
  });

public class User{

    @JsonProperty("firstName")
    private String firstName;

    @JsonProperty("lastName")
    private String lastName;

}



@RestController
@RequestMapping(value = "/api")
public class EmailControllerImpl {

    @PostMapping("/user")
    public ResponseEntity<String> addUser(@RequestBody User userPojo){

          //Deal with your User

    }

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>