jquery ajax 序列化

女爷i 2023-03-04 09:18 6阅读 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>

**点击按钮**

![20200803101418484.png][]

[20200803101418484.png]: /images/20230208/2919942e3af842a99bd3e692c9a56b72.png