springMVC接收json数组的三种方式

最新推荐文章于 2024-08-01 19:56:03 发布

bladeandmaster88

最新推荐文章于 2024-08-01 19:56:03 发布

阅读量9.5k

点赞数 12

分类专栏： springMVC

本文链接：https://blog.csdn.net/bladeandmaster88/article/details/99697740

版权

springMVC 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

代码见https://gitee.com/bladeandmaster/freemarkerDemo

1、第一种，后端采用String接收

$("#confirm1").click(function (){
    var jsonArr=[{"count":1,"name":"aa"},{"count":2,"name":"bb"}];
    $.ajax({
        type: 'post',
        url: 'getJsonData1',
        data: {ticketJson:JSON.stringify(jsonArr)},
        dataType: 'json',
        //contentType : "application/json",
        success: function(jsonData) {
            console.info("后端返回数据--------");
            console.info(jsonData);;
        }
    })
});

此时contentType不能设置为"application/json"。

2、后端采用数组对象接收，需要加@RequestBody注解，即使用@RequestBody List<TicketCart> ticketCartList接收

$("#confirm2").click(function (){
    var jsonArr=[{"count":1,"name":"aa"},{"count":2,"name":"bb"}];

    $.ajax({
        type: 'post',
        url: 'getJsonData2',
        data: JSON.stringify(jsonArr),
        dataType: 'json',
        contentType: "application/json",
        success: function(jsonData) {
            console.info("后端返回数据--------");
            console.info(jsonData);
        }
    })
});

3、后端采用复杂实体接收@RequestBody TicketCarts ticketCarts

这种前端在得到json数组(数组对象)后，需要再包一层，形成json对象，key值一定要为"ticketCarts"

$("#confirm3").click(function (){
    var jsonArr=[{"count":1,"name":"aa"},{"count":2,"name":"bb"}];

    var json = {"ticketCarts":jsonArr};//这步必不可少，再包一层
    console.info("包装后的json对象-------------");
    console.info(json);

    $.ajax({
        type: 'post',
        url: 'getJsonData3',
        data: JSON.stringify(json),
        dataType: 'json',
        contentType: "application/json",
        success: function(jsonData) {
            console.info("后端返回数据--------");
            console.info(jsonData);
        }
    })
});

最后附上所有的代码：

TicketCart

package com.pingan.core.entity;

public class TicketCart {

    private int count;
    private String name;


    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

TicketCarts

package com.pingan.core.entity;

import java.util.List;

public class TicketCarts {
    private List<TicketCart> ticketCarts;

    public List<TicketCart> getTicketCarts() {
        return ticketCarts;
    }

    public void setTicketCarts(List<TicketCart> ticketCarts) {
        this.ticketCarts = ticketCarts;
    }
}

JsonDataController

package com.pingan.core.controller;

import com.alibaba.fastjson.JSONObject;
import com.pingan.core.entity.TicketCart;
import com.pingan.core.entity.TicketCarts;
import lombok.extern.slf4j.Slf4j;
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.ResponseBody;

import java.util.List;

@Controller
@Slf4j
public class JsonDataController {

    //localhost:8080/jsonDataView
    @RequestMapping("/jsonDataView")
    public String formDataView(){
        return "jsonData";
    }

    //{"ticketCarts":[{"count":1,"name":"aa"},{"count":2,"name":"bb"}]}
    @RequestMapping("/getJsonData1")
    @ResponseBody
    public TicketCarts getJsonData1(String ticketJson){

        List<TicketCart> ticketCartList = JSONObject.parseArray(ticketJson,TicketCart.class);

        TicketCarts ticketCarts = new TicketCarts();
        ticketCarts.setTicketCarts(ticketCartList);
        return ticketCarts;
    }

    @RequestMapping("/getJsonData2")
    @ResponseBody
    public TicketCarts getJsonData2(@RequestBody List<TicketCart> ticketCartList){
        TicketCarts ticketCarts = new TicketCarts();
        ticketCarts.setTicketCarts(ticketCartList);
        return ticketCarts;
    }

    @RequestMapping("/getJsonData3")
    @ResponseBody
    public TicketCarts getJsonData3(@RequestBody TicketCarts ticketCarts){
        return ticketCarts;
    }
}

jsonData.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试ajax提交json数组</title>
</head>
<body>
    <div>
        <a id="confirm1">方式一提交</a>
        <a id="confirm2">方式二提交</a>
        <a id="confirm3">方式三提交</a>
    </div>
    <script type="text/javascript" src="/static/commons/js/jquery.min.js"></script>

    <script type="text/javascript">
        $("#confirm1").click(function (){
            var jsonArr=[{"count":1,"name":"aa"},{"count":2,"name":"bb"}];
            $.ajax({
                type: 'post',
                url: 'getJsonData1',
                data: {ticketJson:JSON.stringify(jsonArr)},
                dataType: 'json',
                //contentType : "application/json",
                success: function(jsonData) {
                    console.info("后端返回数据--------");
                    console.info(jsonData);;
                }
            })
        });
    </script>

    <script type="text/javascript">
        $("#confirm2").click(function (){
            var jsonArr=[{"count":1,"name":"aa"},{"count":2,"name":"bb"}];

            $.ajax({
                type: 'post',
                url: 'getJsonData2',
                data: JSON.stringify(jsonArr),
                dataType: 'json',
                contentType: "application/json",
                success: function(jsonData) {
                    console.info("后端返回数据--------");
                    console.info(jsonData);
                }
            })
        });
    </script>

    <script type="text/javascript">
        $("#confirm3").click(function (){
            var jsonArr=[{"count":1,"name":"aa"},{"count":2,"name":"bb"}];

            var json = {"ticketCarts":jsonArr};//这步必不可少，再包一层
            console.info("包装后的json对象-------------");
            console.info(json);

            $.ajax({
                type: 'post',
                url: 'getJsonData3',
                data: JSON.stringify(json),
                dataType: 'json',
                contentType: "application/json",
                success: function(jsonData) {
                    console.info("后端返回数据--------");
                    console.info(jsonData);
                }
            })
        });
    </script>
</body>
</html>