根据春季MVC中的分离下拉列表从数据库中获取数据



我在mongodb中创建了两个集合。

  1. 包含studentid字段的学生集合,
  2. 包含字段studentidstudentmarks的学生记录集合

我有studentid<select>

<select class="form-control">
    <option value="NONE"> --SELECT--</option>
    <c:forEach items="${StudentList}" var="item">
        <option value="${item.StudentID}">${item.StudentID}</option>
    </c:forEach>
</select>
Mark: <input type="text" name="mark" value="Mark to go here"><br>

如何通过在下拉列表中进行选择来将学生的成绩动态加载到文本框中?

您需要使用 JQuery 来动态获取所需的数据。

以下是一些正确方向的指示:

.HTML:

<select class="form-control" id="studentId">
....
</select>
<p id="fieldToFill"></p>

JQuery:

$(function(){
    $('#studentId').change(function(){
        var id = $('#drop option:selected).val();
        $.ajax({
            type: 'POST',
            url: '/your/desired/url',
            data: {
                [[${_csrf.parameterName}]]: [[${_csrf.token}]], // if csrf is enabled
                studentId: id
            },
            success: function(data){
                console.log(data); // display for developer console in browser
                $('#fieldToFill').text(data.grade); // Example 
            },
            error: function(jqXHR, exception){
                alert(jqXHR.status +" " + exception)
            }
        });
    });
});

控制器:

@RequestMapping(value = "/your/desired/url", method = RequestMethod.POST)
public @ResponseBody StudentRecord getRecordById(@RequestParam("studentId") Integer studentId) {
    // Your query method to acquire student records by id
    ...
    return studentRecord;
}

最新更新