jquery 序列化表单成json并传给后台趟坑总结

avatar

jquery将表单序列化有两个方法 serializeArray() serialize() 前者是序列化成数组,后者是拼接好字符串,看下面例子

<form id="form">
    <input type="text" name="username" value="tomoya"/>
    <input type="password" name="password" value="123123"/>
</form>
<script>
    console.log($("#form").serialize()); // 输出:username=tomoya&password=123123
    console.log($("#form").serializeArray()); // 输出:[{"username": "tomoya"}, {"password": "123123'}]
</script>

serialize() 是将表单序列化成字符串
serializeArray() 是将表单序列化成数组对象 注意,是对象

如果只是传一个序列化好的字符串给后台,普通的接收方式即可

<script>
$.ajax({
    url: "/login",
    type: 'post',
    dataType: 'json',
    data: $("#form").serialize(),
    success: function(data) {
      console.log(data);
    }
  })
</script>
@PostMapping("login")
public String login(String username, String password) {
    System.out.println(username + " " + password);
    return "login";
}

但如果是数组对象就要折腾一下了

首先序列化好的数组对象要先转成json字符串 JSON.stringify($("#form").serializeArray())

然后是后台接收,注意:列表接收一定要带上泛型,否则报错

<script>
$.ajax({
    url: "/login",
    type: 'post',
    contentType:"application/json; charset=utf-8",
    dataType: 'json',
    data: JSON.stringify($("#form").serializeArray()),
    success: function(data) {
      console.log(data);
    }
  })
</script>
@PostMapping("login")
public String login(@RequestBody List<Object> list) {
    System.out.println(list.toString());
    return "login";
}

这样就可以少写很多参数了,一个序列化搞定整个表单,还是值得折腾的

希望能帮到正在折腾这个的你 : )

目前还没有回答,快来帮帮TA吧!
添加一条评论 请尽量发布对他人有帮助的评论

登录后可发布评论

登录 | Github登录