使用Ajax传输多选框值解决跨域问题

见日笔记

于 2022-06-14 09:40:03 发布

阅读量209

点赞数

分类专栏：笔记文章标签： ajax javascript ecmascript

本文链接：https://blog.csdn.net/QQAJJ7/article/details/125272152

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html页面

注意点：ajax属于异步请求，所以我们多选框需要在ajax请求之前将值赋给成员变量，不能同时进行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    //导入jq
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>
<body>
爱好：
<input type="checkbox" name="vehicle" value="吃饭" class="vehicle">吃饭
<input type="checkbox" name="vehicle" value="睡觉" class="vehicle">睡觉
<input type="checkbox" name="vehicle" value="打豆豆" class="vehicle">打豆豆
<input type="checkbox" name="vehicle" value="旅游" class="vehicle">旅游
<input type="button" id="T" value="提交">

<script type="text/javascript">
    $(function () {

        var zz="";
        //谨记Class标签为为.获取id为#号获取
        $(".vehicle").on("click", function () {
            var vehicle;
            $("input[name='vehicle']:checked").each(function (index, value) {
                vehicle += value.value+",";
            });
            //转存到上级作用域
            zz = vehicle;
        });

        $("#T").on("click", function () {
            //将前面undefined给切割掉获取拼接的属性值
            alert(zz.substring(9));
            $.ajax({
                url: "/user",
                data: {
                    zz: zz.substring(9)
                }
            });
        });
    })

</script>

</body>
</html>

java代码

 @RequestMapping("/user")
    private String getOne(String zz){

        System.out.println("One = " + zz);

        return "user";
   }

见日笔记

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用Ajax传输多选框值解决跨域问题

ajax属于异步请求，所以我们多选框需要在ajax请求之前将值赋给成员变量，不能同时进行。
复制链接

扫一扫

专栏目录