根据spring mvc中的selceted下拉列表从数据库中获取数据

时间:2022-06-01 22:04:23

I have created two collections in mongodb.

我在mongodb创建了两个集合。

  1. student collection containing a studentid field,
  2. 包含studentid字段的学生集合,

  3. studentrecord collection containing field studentid and studentmarks
  4. studentrecord集合包含字段studentid和studentmarks

I have the studentid's in a <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>

How can I dynamically load a student's marks into the text box by making a selection in the dropdown?

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

1 个解决方案

#1


0  

You'll need to use JQuery to dynamically fetch the required data.

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

Here are a few pointers in the right direction:

以下是正确方向的几点建议:

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

Controller:

@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;
}

#1


0  

You'll need to use JQuery to dynamically fetch the required data.

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

Here are a few pointers in the right direction:

以下是正确方向的几点建议:

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

Controller:

@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;
}