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

最新推荐文章于 2024-07-19 13:30:48 发布

刘季玉

最新推荐文章于 2024-07-19 13:30:48 发布

阅读量1.3w

点赞数 6

分类专栏：前后端参数传递文章标签： jquary springmvc ajax

本文链接：https://blog.csdn.net/qq_26587997/article/details/83051837

版权

前后端参数传递专栏收录该内容

4 篇文章 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;
    }

运行结果:

在这里插入图片描述

发送$.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;
    }

运行结果:

在这里插入图片描述

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