Как можно осуществить выбор и загрузку данных на форму?

Question

Самира

thymeleaf , java , spring

Как можно осуществить выбор и загрузку данных на форму?

Доброго дня. 

У меня есть следующее задание: <br/> 
Я передаю на форму список, как показано ниже: <br/> 
<pre><code class="java">@Controller
@RequestMapping("/taskadd")
public class TasksController {
    @Autowired
    ProjectMembersRepository projectMembersRepository;
    
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String getProjectMember(Model model) {
        List&lt;String&gt; projectName = projectMembersRepository.find_SHORT_NAME_Like();
        model.addAttribute("projectName", projectName);
        return "taskadd";
    } 
}</code></pre> 

Далее, я отображаю этот список на форме: <br/> 
<pre><code class="html">&lt;div class="form-group"&gt;
    &lt;label for="projectName"&gt;Проект&lt;/label&gt;
    &lt;select class="form-control " id="projectName" required&gt;
        &lt;option hidden value=""&gt;Проект&lt;/option&gt;
        &lt;option
                th:each="projectName : ${projectName}"
                th:text="${projectName}"
                th:value="${projectName}"&gt;
        &lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;</code></pre> 

На форме также есть еще пять других полей. <br/> 
Мне необходимо реализовать следующий функционал: пользователь выбирает значение в представленном поле, и это значение должно быть обработано в контроллере. На основе этого выбора нужно выполнить поиск и передать соответствующие данные в остальные поля формы, основываясь на результатах, полученных из базы данных. <br/> 

Я могу реализовать данный функционал, но у меня есть два ограничения: <br/> 1. мне придется добавить кнопку "ОК" рядом с основным полем; <br/> 2. при этом страница будет перезагружаться. <br/> 

Я хотел бы добиться реализации этого механизма без добавления дополнительных кнопок и перезагрузки страницы. Как это можно сделать?

7 сентября 2024 г. 8:23

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для реализации функционала выбора значения из выпадающего списка и обновления других полей формы без перезагрузки страницы, вы можете использовать JavaScript вместе с AJAX-запросами. Это позволит вам отправить выбранное значение на сервер и получить необходимые данные без полной перезагрузки страницы. 

Вот основные шаги для достижения этой цели:

### 1. Измените HTML-код

Вам нужно обновить HTML-код для выпадающего списка и добавить обработчик событий на изменение (`change`):

```html
<div class="form-group">
    <label for="projectName">Проект</label>
    <select class="form-control" id="projectName" required>
        <option hidden value="">Проект</option>
        <option th:each="projectName : ${projectName}" th:text="${projectName}" th:value="${projectName}"></option>
    </select>
</div>

<!-- Здесь могут быть другие поля для отображения данных -->

<div id="additionalFields">
    <!-- Здесь будут отображаться дополнительные поля -->
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('#projectName').change(function() {
            var projectName = $(this).val();
            $.ajax({
                url: '/taskadd/getDetails', // изменить на ваш URL
                type: 'GET',
                data: { projectName: projectName },
                success: function(data) {
                    // Обновляем остальные поля формы с полученными данными
                    $('#additionalFields').html(data);
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });
    });
</script>
```

### 2. Создайте новый метод в контроллере

Вам нужно создать новый метод в `TasksController`, который будет обрабатывать AJAX-запросы и возвращать нужные данные (например, часть HTML-кода для обновления других полей).

```java
@RequestMapping(value = "/getDetails", method = RequestMethod.GET)
@ResponseBody
public String getDetails(@RequestParam String projectName) {
    // Выполните вашу логику поиска данных на основе projectName
    List<SomeDataType> details = someService.getDetailsByProjectName(projectName);

    // Создайте HTML-код для отображения
    StringBuilder sb = new StringBuilder();
    for (SomeDataType detail : details) {
        sb.append("<div>");
        sb.append("<label>").append(detail.getFieldLabel()).append("</label>");
        sb.append("<input type='text' value='").append(detail.getFieldValue()).append("'/>");
        sb.append("</div>");
    }
    return sb.toString();
}
```

### 3. Настройте серверную часть

Убедитесь, что ваш метод `someService.getDetailsByProjectName(projectName)` правильно получает данные из базы данных, основанные на выбранном проекте.

### 4. Обновите представление

В методе `getDetails` вы возвращаете HTML-код для обновления части страницы. Вы можете использовать любой подход, включая шаблоны JSP или Thymeleaf, чтобы генерировать необходимый HTML.

### 5. Тестирование

Не забудьте протестировать обновленный функционал, чтобы убедиться, что данные загружаются и отображаются корректно без перезагрузки страницы.

Таким образом, с помощью JavaScript и AJAX вы сможете динамически загружать данные на форму в зависимости от выбора пользователя, не прибегая к перезагрузке страницы.

Answer 2

Вам нужно использовать jQuery + ajax. Передаете id из первого выбранного поля в бэк. Получаете нужные значения в виде json либо html. Делаете append на странице.