SpringMVC接收JSON数据的五种方式与AJAX的两种应用方式

最新推荐文章于 2022-04-27 12:26:39 发布

猫小博

最新推荐文章于 2022-04-27 12:26:39 发布

阅读量3.5k

点赞数 1

分类专栏： Java 文章标签： SpringMVC中JSON的使用 JSON前后台交互 AJAX的JSON传参两种不同方式 SpringMVC接收JSON数据 JSON的应用

本文链接：https://blog.csdn.net/qq_34578500/article/details/83662795

版权

Java 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前端以ajax默认方式传递数据

前端以ajax默认方式传递数据:
1.使用@RequestParam(“exampleName”) 接收数据 (如果省略@RequestParam(“exampleName”) 那么声名的参数变量需要与前端的key保持一致) 适用于:数据量较小的时候
2.使用@RequestBody Class 接收数据 (@RequestBody 可以省略,不影响)
Ajax的默认格式为：application/x-www-form-urlencoded GET请求:id=1&name=猫小博&phone=15012341234 (中文可能会出现乱码情况) POST请求:建议使用在ajax中声明:type:‘POST’
优点:
1.前端传递数据不用转换为Json格式;
2.后端接参灵活,可以使用单个参数,也可以使用对象,也可以混合使用
缺点:
不能传递数组集合或无规则性质的数据
可能会出现的异常1:java.lang.IllegalStateException: Optional int parameter ‘ids’ is present but cannot be translated into a null value due to being declared as a primitive type. Consider declaring it as object wrapper for the corresponding primitive type. 异常原因:后台接收的变量名称与前台传的key值不同
可能会出现的异常2:java.lang.IllegalArgumentException: No converter found for return value of type: class com.alimao.vo.Student 原因:默认的SpringMVC是没有JackSon包的,需要手动导入JackSon包: jackson-core

代码

   前端传参: id:1 name:'猫小博' phone:'15012341234'
   @ResponseBody
   @RequestMapping("/requestParam")
   public String methodRequestParam(@RequestParam("id") int idTest,@RequestParam("name") String nameTest,String phone){
       System.out.println("idTest="+idTest);
       System.out.println("nameTest="+nameTest);
       System.out.println("phone="+phone);
       return "";
   }
   @ResponseBody
   @RequestMapping("/requestBody")
   public Student methodClasses(Student student){
       System.out.println(student);
       return student;
   }

输出结果

在这里插入图片描述

前端以application/json方式传递数据

前端以application/json方式传递数据: (contentType: ‘application/json; charset=utf-8’)
1.使用@RequestBody 接收数据(不可以省略)
2.前端,必须将数据转换为Json格式,即 JSON.stringify(data),否则会出现错误
3.必须把所有需要的参数封装到Json数据中,即 methodMap(@RequestBody Map<String,Object> map) 参数列表中,只能有一个map,如果写成 methodMap(@RequestBody Map<String,Object> map,@RequestParam(“name”) String nameTest),nameTest是没有办法进行传参的,为null
优点:
可以传递数组集合与无规则性质的数据,使用Map<Stirng,Object>接收
缺点:
1.contentType: ‘application/json; charset=utf-8’ ,并且data必须转换为Json格式,JSON.stringify(data)
2.必须将所有的数据封装一个JSON中,即参数只有一个,不是很灵活.
可能会出现的异常:POST http://localhost/test/order 415 (Unsupported Media Type) 错误原因:在前端发送的ajax请求中务必加上:contentType: “application/json; charset=utf-8”

代码

    前端传参: {sno:18,sname:'猫小博',ssex:'男',sbirthday:'1997-01-01',grade:'一年级',student:{sno:18,sname:'猫小博',ssex:'男',sbirthday:'1997-01-01',grade:'一年级'}}
    @RequestMapping("/map")
    @ResponseBody
    public Map<String,Object> methodMap(@RequestBody Map<String,Object> map){
        System.out.println(map);
        Map<String,Object> mapStu = (Map<String,Object>)map.get("student");
        System.out.println(mapStu);
        return map;
    }

输出结果

在这里插入图片描述

代码

    前端传参: [{sno:18,sname:'猫小博',ssex:'男',sbirthday:'1997-01-01',grade:'一年级'},
              {sno:18,sname:'猫小博',ssex:'男',sbirthday:'1997-01-01',grade:'一年级'},
              {sno:18,sname:'猫小博',ssex:'男',sbirthday:'1997-01-01',grade:'一年级'}]
    @RequestMapping("/mapList")
    @ResponseBody
    public List<Map<String,Object>> methodMapList(@RequestBody List<Map<String,Object>> mapList){
        System.out.println(mapList);
        return mapList;
    }
    @RequestMapping("/stuList")
    @ResponseBody
    public List<Student> methodStuList(@RequestBody List<Student> stuList){
        System.out.println(stuList);
        return stuList;
    }

输出结果

在这里插入图片描述

前后台完整代码

后台Controller层完整代码

import com.alibaba.fastjson.JSON;
import com.alimao.vo.Student;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
import java.util.Map;
/**
 * JSONPrac
 * 前后台JSON数据交互
 * @author 猫小博
 * @date 2018/11/2
 * @time 9:40
 */
@Controller
@RequestMapping("/json")
public class JSONPrac {
    @ResponseBody
    @RequestMapping("/requestParam")
    public String methodRequestParam(@RequestParam("id") int idTest,@RequestParam("name") String nameTest,String phone){
        System.out.println("idTest="+idTest);
        System.out.println("nameTest="+nameTest);
        System.out.println("phone="+phone);
        return "";
    }
    
    @ResponseBody
    @RequestMapping("/requestBody")
    public Student methodClasses(Student student){
        System.out.println(student);
        return student;
    }
    
    @RequestMapping("/map")
    @ResponseBody
    public Map<String,Object> methodMap(@RequestBody Map<String,Object> map){
        System.out.println(map);
        Map<String,Object> mapStu = (Map<String,Object>)map.get("student");
        System.out.println(mapStu);
        return map;
    }

    @RequestMapping("/mapList")
    @ResponseBody
    public List<Map<String,Object>> methodMapList(@RequestBody List<Map<String,Object>> mapList){
        System.out.println(mapList);
        return mapList;
    }
    
    @RequestMapping("/stuList")
    @ResponseBody
    public List<Student> methodStuList(@RequestBody List<Student> stuList){
        System.out.println(stuList);
        return stuList;
    }
}

前端完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON练习</title>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>
    <button id="requestParam">RequestParam</button>
    <button id="requestBody">RequestBody</button>
    <button id="map">Map</button>
    <button id="mapList">MapList</button>
    <script>
        //注释为:  注意的,可以进行前后对比一下,看看两种方式有什么不一样的地方
        //不需要将data转换为JSON格式,直接传递即可,使用ajax默认的方式
        $("#requestParam").click(function(){
            var url = "/mvc/json/requestParam";
            var data = {id:1,name:'猫小博',phone:'15012341234'};
            $.ajax({
                url: url, //需要访问的服务器的请求地址
                type: 'POST',//以POST方式提交,如果为 'GET' 则以GET方式提交
                async: true,//异步发送,如果为false,则为同步发送
                data:data,//需要传入的数据**注意**
                dataType:'json',//返回数据类型为json类型
                success:function(data){//响应成功,访问此方法
                    console.log("SUCCESS")
                    console.log(data);
                },
                error:function(data){//响应失败,访问此方法
                    console.log("ERROR")
                    console.log(data);
                }
            })
        });
	//不需要将data转换为JSON格式,直接传递即可,使用ajax默认的方式
        $("#requestBody").click(function(){
            var url = "/mvc/json/requestBody";
            var data = {sno:18,sname:'猫小博',ssex:'男',sbirthday:'1997-01-01',grade:'一年级'};
            $.ajax({
                url: url,
                type: 'POST',
                async: true,
                data:data,//需要传入的数据**注意**
                dataType:'json',
                success:function(data){
                    console.log("SUCCESS")
                    console.log(data);
                },
                error:function(data){
                    console.log("ERROR")
                    console.log(data);
                }
            })
        });
	//需要将data转换为JSON格式,使用ajax 的application/json方式
        $("#map").click(function(){
            var url = "/mvc/json/map";
            var data = {sno:18,sname:'猫小博',ssex:'男',sbirthday:'1997-01-01',grade:'一年级',student:{sno:18,sname:'猫小博',ssex:'男',sbirthday:'1997-01-01',grade:'一年级'}};
            $.ajax({
                url: url,
                type: 'POST',
                async: true,
                contentType: 'application/json; charset=utf-8',//注意
                data:JSON.stringify(data),//需要传入的数据**注意**
                dataType:'json',
                success:function(data){
                    console.log("SUCCESS:");
                    console.log(data);
                },
                error:function(data){
                    console.log("ERROR:");
                    console.log(data);
                }
            })
        });
	//需要将data转换为JSON格式,使用ajax 的application/json方式
        $("#mapList").click(function(){
            var url = "/mvc/json/mapList";
            // var url = "/mvc/json/stuList"; 两个url切换,"/mvc/json/mapList"调用RequestMapping为mapList的方法  "/mvc/json/stuList"调用RequestMapping为stuList的方法
            var data = [{sno:18,sname:'猫小博',ssex:'男',sbirthday:'1997-01-01',grade:'一年级'},
                {sno:18,sname:'猫小博',ssex:'男',sbirthday:'1997-01-01',grade:'一年级'},
                {sno:18,sname:'猫小博',ssex:'男',sbirthday:'1997-01-01',grade:'一年级'}];
            $.ajax({
                url: url,
                type: 'POST',
                async: true,
                contentType: 'application/json; charset=utf-8',//注意
                data:JSON.stringify(data),//需要传入的数据**注意**
                dataType:'json',
                success:function(data){
                    console.log("SUCCESS:")
                    console.log(data);
                },
                error:function(data){
                    console.log("ERROR:")
                    console.log(data);
                }
            })
        });
    </script>
</body>
</html>

猫小博

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
SpringMVC接收JSON数据的五种方式与AJAX的两种应用方式

前端以ajax默认方式传递数据前端以ajax默认方式传递数据:1.使用@RequestParam(“exampleName”) 接收数据 (如果省略@RequestParam(“exampleName”) 那么声名的参数变量需要与前端的key保持一致) 适用于:数据量较小的时候2.使用@RequestBody Class 接收数据 (@RequestBody 可以省略,不影响)Ajax...
复制链接

扫一扫