Ajax和SpringMVC之间JSON交互

Stella981
• 阅读 607

Ajax和SpringMVC之间的json数据传输有两种方式:

1.直接传输Json对象

2.将Json序列化成json字符串

1.直接传输Json对象

前端Ajax

$(document).ready(function(){
    $("#btn_login").click(function(){
        var dataJson = {
            username:$("#username").val(),
            password:$("#password").val()
        };
        $.ajax({
            url:"/login/",
            type:"post",
            data:dataJson,
            contentType:"application/x-www-form-urlencoded",//如不设置此项,默认也为此,设置发送给后端的类型
            dataType:"json",//设置接收后端的数据的类型
            async:true,//设置异步,不然可能接收不到后端返回的json
            success:function(data){//data为后端返回的json
                if(data.code==0){
                    window.location.reload();
                }
                else {

                }
            }
        });
    });
});

后端使用

@RequestMapping(path = {"/login/"}, method = {RequestMethod.GET, RequestMethod.POST})
    @ResponseBody
    public String login(@RequestParam("username") String username,
                        @RequestParam("password") String password,
                        HttpServletResponse response) {
        try {
            Map<String, Object> map = userService.login(username, password);
            if (map.containsKey("ticket")) {
                Cookie cookie = new Cookie("ticket", map.get("ticket").toString());
                cookie.setPath("/");
                response.addCookie(cookie);
                //return "redirect:/";
              return CommonUtil.getJSONString(0, "成功");
            } else {
                //return "redirect:/";
                return CommonUtil.getJSONString(1, map);
            }

        } catch (Exception e) {
            logger.error("登录异常" + e.getMessage());
            //return "redirect:/";
            return CommonUtil.getJSONString(1, "注册异常");
        }
    }

使用@RequestParam,即使用Servlet的request.getgetParameter。这种方式可以接受以application/x-www-form-urlencoded这种方式传输的JSON对象的。

2.将Json序列化

前端Ajax

$(document).ready(function(){
    $("#btn_reg").click(function(){
        var dataJson = {
            username:$("#regusername").val(),
            password:$("#regpassword").val()
        };
        $.ajax({
            url:"/reg/",
            type:"post",
            contentType:"application/json",//以json字符串形式传输
            data:JSON.stringify(dataJson),//将json对象序列化成字符串
            dataType:"json",
            async:true,
            success:function(data){
                if(data.code==0){
                    window.location.reload();
                }
                else {

                }
            }
        });

    });
});

后端Controller

@RequestMapping(path = {"/reg/"}, method = {RequestMethod.GET, RequestMethod.POST})
    @ResponseBody
    public String reg(@RequestBody User user,
                      HttpServletResponse response) {
        try {
            Map<String, Object> map = userService.register(user.getUsername(), user.getPassword());
            if (map.containsKey("ticket")) {
                Cookie cookie = new Cookie("ticket", map.get("ticket").toString());
                cookie.setPath("/");

                response.addCookie(cookie);
                return CommonUtil.getJSONString(0, "注册成功");
            } else {
                return CommonUtil.getJSONString(1, map);
            }

        } catch (Exception e) {
            logger.error("注册异常" + e.getMessage());
            return CommonUtil.getJSONString(1, "注册异常");
        }
    }

@RequestBody中的user中,必须有与前端名称一致的属性,才可以接受到相应数据。

除此之外,@RequestBody还可用Map<String,Object> map来接收。

转载:https://my.oschina.net/u/3786691/blog/1823541

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Easter79 Easter79
2年前
SpringMVC @RequestBody接收Json对象字符串
以前,一直以为在SpringMVC环境中,@RequestBody接收的是一个Json对象,一直在调试代码都没有成功,后来发现,其实@RequestBody接收的是一个Json对象的字符串,而不是一个Json对象。然而在ajax请求往往传的都是Json对象,后来发现用JSON.stringify(data)的方式就能将对象变成字符串。同时ajax请求的时
Stella981 Stella981
2年前
JFinal使用笔记5
1、前台代码$.ajax({type:"POST",url:"/activity",dataType:"json",success:function(data){alert("success");conso
Stella981 Stella981
2年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Stella981 Stella981
2年前
Es6获取数据
$(function(){$.ajax({//请求方式type:"GET",//文件位置url:"js/data.json",//返回数据格式为json,也可以是其他格式如dataType:"json",//请求成功后要执行的函数,拼接htmlsuccess:function(res){var
Stella981 Stella981
2年前
Gson之实例五
前面四篇博客基本上可以满足我们处理的绝大多数需求,但有时项目中对json有特殊的格式规定.比如下面的json串解析:{"tableName":"students","tableData":{"id":1,"name":"李坤","birthDay":"Jun 22, 2012 9:54:49 PM"},{"id":2,"name":"曹贵生"
Wesley13 Wesley13
2年前
JSON,异步加载(学习笔记)
JSON是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来数据传输的,前端与后端的数据通信)JSON是静态类(不需要构造),类似于Math,内部有各种函数   1).JSON.parse();stringjson(解析成对象属性和属性值,可以进行调用)  2).JSON.stringi
Wesley13 Wesley13
2年前
unity将 -u4E00 这种 编码 转汉字 方法
 unity中直接使用 JsonMapper.ToJson(对象),取到的字符串,里面汉字可能是\\u4E00类似这种其实也不用转,服务器会通过类似fastjson发序列化的方式,将json转对象,获取对象的值就是中文但是有时服务器要求将传参中字符串中类似\\u4E00这种转汉字,就需要下面 publ