SSM环境中 Ajax 发送简单数组的三种方法

SSM环境中 Ajax 发送简单数组

第一种方法（不推荐）

jsp代码：

<script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script>
        $(function () {

            $("#btn1").click(function () {
                $.ajax({
                    "url": "send/array/one.html",//请求目标资源的地址
                    "type": "post",//请求方式
                    "data": {
                        "array": [5, 8, 10]
                    },//要发送的请求参数
                    "dataType": "text",//如何对待服务器返回的数据
                    "success": function (response) {//服务器端成功处理请求后调用的回调函数，response是响应体数据
                        alert(response);
                    },
                    "error": function (response) {//服务器端处理请求失败后调用的回调函数，response是响应体数据
                        alert(response);
                    }
                })
            })
         })

Controller代码：

 @ResponseBody
    @RequestMapping("/send/array/one.html")
    public String testReceiveArrayOne(@RequestParam("array[]") List<Integer> array){
        for (Integer number: array) {
            System.out.println("number="+number);
        }
        return "success";
    }

第二种方法（不推荐）需要用到实体类

pojo代码：

package com.lyc.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.List;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class ParamData {
    private List<Integer> array;

}

jsp代码：

<script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script>
        $(function () {
$("#btn2").click(function () {
                $.ajax({
                    "url": "send/array/two.html",//请求目标资源的地址
                    "type": "post",//请求方式
                    "data": {
                        "array[0]": 5,
                        "array[1]": 8,
                        "array[2]": 12
                    },//要发送的请求参数
                    "dataType": "text",//如何对待服务器返回的数据
                    "success": function (response) {//服务器端成功处理请求后调用的回调函数，response是响应体数据
                        alert(response);
                    },
                    "error": function (response) {//服务器端处理请求失败后调用的回调函数，response是响应体数据
                        alert(response);
                    }
                })
            })
         })

Controller代码：

@ResponseBody
    @RequestMapping("/send/array/two.html")
    public String testReceiveArrayTwo(ParamData paramData){
        List<Integer> array = paramData.getArray();
        for (Integer number: array) {
            System.out.println("number="+number);
        }
        return "success";
    }

第三种方法（推荐）

@H_404_48@jsp代码：

<script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script>
        $(function () {
$("#btn3").click(function () {
                //准备好要发送到服务器端的数组
                let array = [5, 8, 10];
                console.log(array.length);
                //将JSON数组转换为JSON字符串
                let requestBody = JSON.stringify(array);
                console.log(requestBody.length);
                $.ajax({
                    "url": "send/array/three.html",//请求目标资源的地址
                    "type": "post",//请求方式
                    "data": requestBody,//请求体
                    "contentType": "application/json;charset=UTF-8",//请求体的内容类型,告诉服务器端本次请求的请求体是json数据
                    "dataType": "text",//如何对待服务器返回的数据
                    "success": function (response) {//服务器端成功处理请求后调用的回调函数，response是响应体数据
                        alert(response);
                    },
                    "error": function (response) {//服务器端处理请求失败后调用的回调函数，response是响应体数据
                        alert(response);
                    }
                })
            })
         })

Controller代码：

 @ResponseBody
    @RequestMapping("/send/array/three.html")
    public String testReceiveArrayThree(@RequestBody List<Integer> array){
        for (Integer number: array) {
            logger.info("number="+number);
        }
        return "success";
    }