怎么把表单数据作为一个个对象，封装成list集合提交到后端

Question

怎么把表单数据作为一个个对象，封装成list集合提交到后端？

被问题困扰住好多天了

业务：一次录入多个成绩

前端代码：

sno，sname,grade，学号和学生名来自后端数据库（展示），成绩来自input框录入

let list = json.data
    for (let i = 0;i < list.length;i++){
    let tr = '<span class="hljs-tag"><<span class="hljs-name">tr</span>></span>\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' +
}

页面效果

不知道怎么把form里每栏的数据封装成一个对象，把整个表单提交的数据弄成一个集合传递给后端

后端代码：SpringBoot框架

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

ajax:不知道此处的data集合如何写

$.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);
            }
        });
    });

Answer 1

试试

$("form").serialize()