怎么把前端的表单数据封装成一个个对象传递到后端

我弄了好多天都没解决！QAQ

业务：一次录入多个学生成绩

前端代码：要传递的数据：sno,sname,grade

这里从后台获取了学号，学生名，成绩是新添加上去的，是一个input框

let list = json.data
    for (let i = 0;i < list.length;i++){
    let tr = '<tr>\n' +
    '<td><input name="snos" value="#{sno}" type="checkbox" class="ckitem" />td>\n' +
    '<td>#{sno}td>\n' +
    '<td>#{sname}td>\n' +
    '<td><input id="grade" name="grade" type="text" placeholder="成绩：">td>\n' 
}

展示效果：

后端代码：

不知道怎么把表单的数据弄成List集合，传给后端，这里后端的代码如下：

这里用的是springboot框架

    @RequestMapping("create")
    public JsonResult<Void> create(HttpSession session, String cno,@RequestBody List scoreItems){
        String tno = getTnoFromSession(session);
        waitScoreService.create(tno,cno,scoreItems);
        return new JsonResult<>(OK);
    }

ajax代码：就是不知道此处的data要从哪来！怎么把表单数据封装一个list集合

$.ajax({
                url:"/score/create?cno="+cno,
                data:JSON.stringify(data),
                type:"post",
                dataType:"json",
                contentType:"application/json",
                success:function (json){
                    if (json.state == 200){
                        alert("录入成绩成功");
                        //跳转到系统主页index.html
                        //相对路径确定跳转页面
                        window.location.reload();
                        //将服务器返回头像设置到Cookie中
                        $.cookie("avatar",json.data.avatar,
                                {expires:7});
                        console.log(json.data.avatar);
                    }else {
                        alert("录入失败");
                    }
                },
                error:function (xhr){
                    alert("录入成绩时产生未知异常" + xhr.message);
                }
            });
        });

请大家教教我，怎么把前端的数据作为一个个数据封装成list集合传递到后端！在网上查了很多方法，单独提交表单的话，只把表单提交成一个对象，往后端传东西，不知道怎么把我表单里的一个个数据作为对象封装成List

试试$("form").serialize()