使用原生$.ajax()发送post请求和$.post()请求的区别

秒速五厘米 2022-05-07 04:00 233阅读 0赞

**jquary中的$.post()方法是对$.ajax()方法的一种封装 , 可以对使用$.ajax()发送post请求的过程做出一定的简化 , 但在使用SpringMVC的Controller中的方法接收封装前端传递的请求参数时 , 发现两者传递请求参数的方式并不一致. 于是我做了一组测试来对比两种异步请求方式的差异.**

# 一. 编写前端页面 #

<body>
    <script>
        $(function () { 
            $("#form").submit(function () { 
                var name = $("#name").val();
                var money = $("#money").val();
                // 发送异步请求
                $.post("account/post", { name: name, money: money}, function (account) { 
                    alert(account.id);
                }, "json");
    
                /* $.ajax({ type: "post", url: "account/ajax", contentType: "application/json;charset=utf-8", data: JSON.stringify({name: name, money: money}), dataType: "json", success: function (data) { alert(account.id); } });*/
                return false;
            });
        });
    </script>
    <form id="form" action="account/save">
        姓名:<input id="name" type="text" name="name"><br>
        余额:<input id="money" type="number" name="money"><br>
        <input type="submit" name="提交">
    </form>
    </body>

# 二. 编写接收前端请求的Controller类 #

@Controller
    @RequestMapping("/account")
    public class AccountController { 
        @Autowired
        private IAccountService accountService;
        
        @RequestMapping("/ajax")
        @ResponseBody
        public Account ajaxTest(@RequestBody Account account) { 
            System.out.println("ajaxTest执行了...");
            accountService.save(account);
            return account;
        }
    
        @RequestMapping("/post")
        @ResponseBody
        public Account postTest(Account account) { 
            System.out.println("postTest执行了...");
            accountService.save(account);
            return account;
        }
    }

**实体类和service就不码了 , 接下来通过更改调用$.ajax()和$.post()方法时传递的data参数的形式 , 来对比两种请求方式的差异**

直接获取表单项的属性值
    	var name = $("#name").val();
      	var money = $("#money").val();
      	然后以{name: name, money: money}的形式传递键值对
      	这种参数本质上是一个js对象 , 异步请求方法如下:

## 发送$.post(): ##

//post请求
     $.post("account/post", { name: name, money: money}, function (account) {  
     			alert(account.id);
     }, "json");

接收方法:

@RequestMapping("/post")
        @ResponseBody
        public Account postTest(Account account) { 
        	//保存账户并查询新增账户的id
            accountService.save(account);
            return account;
        }

运行结果:  
![70][]  
![在这里插入图片描述][70 1]

## 发送$.ajax(): ##

//ajax请求
    $.ajax({ 
            type: "post",
            url: "account/ajax",
            contentType: "application/json;charset=utf-8",
            data:JSON.stringify({ name: name, money: money}),
            dataType: "json",
            success: function (data) { 
                         alert(account.id);
                     });

接收方法:

@RequestMapping("/ajax")
        @ResponseBody
        public Account ajaxTest(@RequestBody Account account) { 
        	//保存账户并查询新增账户的id
            accountService.save(account);
            return account;
        }

运行结果:

![在这里插入图片描述][70 2]

![在这里插入图片描述][70 3]

两种请求方式都成功传递并返回了数据 , **但区别在于**:  
**1.请求方式:**  
$.post()发送json的形式为 \{name: name, money: money\}  
$.ajax()发送json的形式为 JSON.stringify(\{name: name, money: money\})  
如果$.ajax()使用 \{name: name, money: money\}发送数据 , 会被浏览器解析为html类型参数 , 并且无法被Controller解析  
![在这里插入图片描述][70 4]

**2.解析方式**  
接收$.post()请求的方法**直接使用 Account 类型**封装了参数  
接收$.ajax()请求的方法**额外使用了 @RequestBody注解** , 从请求体中获取json数据 , 才将参数封装为 Account 类型

[70]: /images/20220506/75b9ae389cc3469b8a1525b80b8f5977.png
[70 1]: /images/20220506/f3826de58f084ee7a40e449e3b094375.png
[70 2]: /images/20220506/8ba66fe6ec5c42fca3f5992a85397dc4.png
[70 3]: /images/20220506/9785fd1e63a04174bb4d2c31431eb341.png
[70 4]: /images/20220506/75b22615d94448d7b019c590ff2bf594.png