SpringBoot表单保存

Question

如何把这个表单提交到后端，存储到数据库里，给改下，代码，谢谢！

下面是我的写法，但是我搞不定。只有把这个数据一起存储到数据库即可！！

<form class="form-horizontal m" id="form-overallevaluation-add">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h3>综合素质自评</h3>
                    </div>
                    <div class="ibox-content">
                        <table class="table">
                            <thead>
                            <tr>
                                <th scope="col" class="text-center" style="font-weight: bold;font-size: 18px;width: 100px;"><div class="alert alert-success" style="margin-bottom: 5px;">序号 </div></th>
                                <th scope="col" class="text-center" style="font-weight: bold;font-size: 18px;"><div class="alert alert-success " style="margin-bottom: 5px;">评价内容</div></th>
                                <th scope="col" class="text-center" style="font-weight: bold;font-size: 18px;width: 130px;"><div class="alert alert-success" style="margin-bottom: 5px;">学生自评</div></th>
                            </tr>
                            </thead>
                            <tr th:each="qitem,item:${qlist}">
                                <td class="text-center" scope="row"><div class="tdstyle alert  alert-info"><span th:text="${item.index+1}"></span></div></td>
                                <td><div class="tdstyle alert  alert-info "><span th:id="'question_'+${qitem.itemid}" th:text="${qitem.itemTitle}"></span></div></td>
                                <td><div class="tdstyle alert  alert-info">


                                    <select th:id="'question_'+${qitem.itemid}+'_option'"  name="selfAssessment" class="form-control m-b" th:with="type=${@dict.getType('system_rank')}">
                                        <option  th:attr="data-id=${qitem.itemid}" th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                    </select>
                                </div></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        

Answer 1

基于Monster 组和GPT的调写：
在前端将表单数据序列化成符合后端接口要求的参数格式，并使用 AJAX 发送 POST 请求到后端。

以下是可能的修改代码示例：

function submitData() {
    var formData = $('#form-overallevaluation-add').serialize();
    var semester = '2022-01'; // 替换为您要提交的学期信息
    $.ajax({
        type: "POST",
        url: prefix + "/submitOptions",
        data: {
            semester: semester,
            options: formData
        },
        success: function(result) {
            if (result.code == web_status.SUCCESS) {
                $.modal.msgSuccess("提交成功");
                $.modal.close();
            } else {
                $.modal.msgError(result.msg);
            }
        }
    });
}

修改后的代码将 serialize() 方法返回的字符串作为参数 options 提交到后端，并且手动设置了学期参数 semester。后端接口的参数也做了相应的修改。