ajax提交json的两种方式

最新推荐文章于 2024-05-16 13:56:10 发布

hy1255564202

最新推荐文章于 2024-05-16 13:56:10 发布

阅读量4k

点赞数 1

分类专栏： springboot

本文链接：https://blog.csdn.net/hy1255564202/article/details/104156755

版权

springboot 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

只能说是大概了然，以后翻看起来有点印象：
这篇的@RequestBody写的可以：
@RequestBody的使用
关于Ajax的contentType:
https://www.cnblogs.com/htoooth/p/7242217.html
看了这篇我才知道我把json和表单格式字符串弄混了：
ajax传参数json对象到后台获取（两种方式）
由于底层传递还是要序列化的，所以ajax一般都是这么写的：

在这里插入图片描述
通过这个方法将数据序列化：var jsondata=JSON.stringify(category);然后传到前台用@RequestBody,具体见上面的那篇：[@RequestBody的使用]
然后第二种方式就是我弄混的

这个其实就相当于提交一个表单：

这篇也写的比较好：@RequestBody, @ResponseBody 注解详解
里面：在这里插入图片描述
然后这篇就是解释：@responsebody 返回json

当一个处理请求的方法标记为@ResponseBody时，就说明该方法需要输出其他视图（json、xml），SpringMVC通过已定义的转化器做转化输出，默认输出json。

其实简单的来讲，只要按照下边这个模板写就是传给后台json字符串，后台响应给前台就是json，以后可以直接照着下边这个模板写：

方式一：ajax提交json字符串

submit.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>用AJAX以JSON方式提交数据</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<form >
    id：<input type="text" id="id" value="123" /><br/>
    名称：<input type="text" id="name" value="category xxx"/><br/>
    <input type="button" value="提交" id="sender">
</form>
<div id="messageDiv"></div>

<script>
    var page="category";
    $('#sender').click(function(){
        var id=document.getElementById('id').value;
        var name=document.getElementById('name').value;
        var category={"name":name,"id":id};
        var jsonData = JSON.stringify(category);


        $.ajax({
            type:"put",
            url: page,
            data:jsonData,
            dataType:"json",
            contentType : "application/json;charset=UTF-8",
            success: function(data){             //此处的data就是一个json
                var id=data.id;
                var name=data.name;
                $("#messageDiv").html("分类id："+ id + "<br>分类名称:" +name );
            }
        });

    });
</script>
</body>

</html>

Controller:

@PutMapping("/category")
	@ResponseBody
	public Category addCategory2(@RequestBody Category category) throws Exception {
		Category c=new Category();
		c.setName("testCategory");
		c.setId(100);
		System.out.println("springboot接受到浏览器以JSON格式提交的数据："+category);
		return c;
	}

测试：
在这里插入图片描述

测试成功！
这些是有价值的参考的，包括会使用pojo的原理：
浅析@ResponseBody注解作用和原理
 json.stringify()的妙用，json.stringify()与json.parse()的区别
这篇比较好，打开我的困惑：
ajax中设置contentType: “application/json”的作用
这篇中说道：
在这里插入图片描述

方式二：ajax提交json对象

和这篇中的POST提交数据之—Content-Type的理解；
在这里插入图片描述
其实是一个意思，我估计他们两个都是想表达传递json对象的形式，就是第一张图片不太严谨，按理来说json的属性字段应该加双引号，所以还是以这篇为准：POST提交数据之—Content-Type的理解；因为有application/x-www-form-urlencoded会将其编码，也就是下面这一段解释，所以以json提交的能被转化为key=value的形式。

在这里插入图片描述

关于json对象与json字符串：https://www.cnblogs.com/wxh0929/p/11132073.html

hy1255564202

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
ajax提交json的两种方式

只能说是大概了然，以后翻看起来有点印象：这篇的@RequestBody写的可以：@RequestBody的使用关于Ajax的contentType:https://www.cnblogs.com/htoooth/p/7242217.html看了这篇我才知道我把json和表单格式字符串弄混了：ajax传参数json对象到后台获取（两种方式）由于底层传递还是要序列化的，所以ajax一般都...
复制链接

扫一扫