jquery向服务端发送json数据的api模板

 多易教育，专注大数据培训； 课程引领市场，就业乘风破浪
 [多易教育官网地址](https://www.51doit.cn/?utm_platform=csdn&utm_campain=coupon)
 https://www.51doit.cn
[多易教育在线学习平台](https://v.51doit.cn/?utm_platform=csdn_ck)
https://v.51doit.cn

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 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>

 多易教育，专注大数据培训； 课程引领市场，就业乘风破浪
 [多易教育官网地址](https://www.51doit.cn/?utm_platform=csdn&utm_campain=coupon)
 https://www.51doit.cn
[多易教育在线学习平台](https://v.51doit.cn/?utm_platform=csdn_ck)
https://v.51doit.cn