首页 > 编程语言 > 详细

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

时间:2021-05-10 13:12:04      阅读:11      评论:0      收藏:0      [点我收藏+]

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";
    }

技术分享图片

第三种方法(推荐)

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";
    }

技术分享图片

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

原文:https://www.cnblogs.com/liuyunche/p/14750455.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!