jquery ajax 序列化

最新推荐文章于 2022-06-09 08:52:09 发布

o_瓜田李下_o

最新推荐文章于 2022-06-09 08:52:09 发布

阅读量188

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/weixin_43931625/article/details/107756585

版权

jquery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

jquery ajax 序列化

应用：将表单序列化，使用ajax传递到后端服务器

*********************

示例

HelloController

@RestController
public class HelloController {

    @RequestMapping("/hello4")
    public String hello4(Person person){
        return person.toString();
    }

    @RequestMapping("/hello5")
    public Map<String,Object> hello5(Person person){
        Map<String,Object> map=new HashMap<>();
        map.put("id",person.getId());
        map.put("name",person.getName());
        map.put("age",person.getAge());

        return map;
    }

    @RequestMapping("/hello6")
    public Map<String,Object> hello6(@RequestBody Person person){
        Map<String,Object> map=new HashMap<>();
        map.put("id",person.getId());
        map.put("name",person.getName());
        map.put("age",person.getAge());

        return map;
    }
}

index.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/jquery/jquery-3.5.1.min.js"></script>
</head>
<script>
    $(function () {
        $("#btn").click(function () {
            $.post({
                url: "/hello4",
                data: $("form").serialize(),
                success: function (data) {
                    $("span").append("<strong style='color: coral'>"+data+"</strong><br><br>")
                }
            });

            const data={
                id: 1,
                name: "海贼王",
                age: 20
            }

            $.post({
                url: "/hello5",
                data: $.param(data),
                success: function (data) {
                    $.each(data,function (index,object) {
                        $("span").append("<strong style='color: green'>"+object+"</strong><br>")
                    });

                    $("span").append("<br>")
                }
            });

            $.post({
                url: "/hello6",
                contentType: "application/json",
                data: JSON.stringify(data),
                success: function (data) {
                    $.each(data,function (index,object) {
                        $("span").append("<strong style='color: aquamarine'>"+object+"</strong><br>")
                    })
                }
            })
        })
    })
</script>
<body>
<form th:align="center">
    id:   <input type="text" name="id"><br>
    name: <input type="text" name="name"><br>
    age:  <input type="text" name="age"><br>
</form>
<div th:align="center">
    <span></span>

    <button id="btn">加载数据</button>
</div>
</body>
</html>

点击按钮