Обработка отправки формы на той же странице Spring Boot

Я делаю веб-приложение тимелеаф Spring Boot, которое принимает путь к файлу в качестве входных данных для панели поиска и выводит каталоги/файлы по этому пути к файлу. В настоящее время результат отображается на отдельной странице тимелеафа, но мне интересно, как изменить его, чтобы результат отображался на той же странице, чуть ниже панели поиска?

Главный контроллер

package net.javavatutorial.tutorials;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

@Controller
@RequestMapping("/")
class MainController
{
    
    @GetMapping("/")
    public String showForm(Model model) {
        Filename filename = new Filename();
        model.addAttribute("filename", filename);
        return "register_form";
    }
    
    @PostMapping("/register")
    public String submitForm(@ModelAttribute("filename") Filename filename) { 
        System.out.println(filename);
        return "register_success";
    }
    
}

Ввод Thymeleaf / Целевая страница с панелью поиска

<!DOCTYPE html>
<html xmlns:th = "http://www.thymeleaf.org">
<head>
<meta charset = "ISO-8859-1">
<title>User Registration</title>
<link href = "https://fonts.googleapis.com/css?family=Lato" rel = "stylesheet">
<link rel = "stylesheet" href = "./css/styles.css">
</head>
<body>
<div class = "container">
<div align = "center">
    <h1>File Finder</h1>
    <form action = "#" th:action = "@{/register}" method = "post" th:object = "${filename}">
        <input type = "text" th:field = "*{filename}" placeholder = "Enter Filepath..."/>
        <button type = "submit">Search</button>    
    </form>
</div>
</div>
</body>
</html>

Страница вывода листьев тимьяна

<!DOCTYPE html>
<html xmlns:th = "http://www.thymeleaf.org">
<head>
<meta charset = "ISO-8859-1">
<title>File Finder</title>
<link href = "https://fonts.googleapis.com/css?family=Lato" rel = "stylesheet">
<link rel = "stylesheet" href = "./css/styles.css">
</head>
<body>
<div class = "container">
<div align = "center">
    <h1>Files Found:</h1>
    <span th:text = "${filename.filename}"></span><br/>
</div>
</div>
</body>
</html>

Имя файла.java

public class Filename {

    private String filename; 
    
    public String getFilename() {
        return filename;
    }

    public void setFilename(String filename) {
        this.filename = Filewalk.filewalk(filename);
    }
    
}

Программа Filewalk.java принимает путь к файлу и выводит файлы/каталоги, содержащиеся в этом пути к файлу.

import java.io.File; 

public class Filewalk {
    
    public static void main(String[] args) {
        System.out.println(filewalk("H:\\jdk-15"));
    }
    
    public static String filewalk(String s) {
        String result = "";
        // creates a file object
        File file = new File(s);
        
        // returns an array of all files
        String[] fileList = file.list();
        
        for (String str : fileList) {
            result += str + ", "; //"\n";
        }
        
        return result;
    }
}

javascript java spring spring-boot thymeleaf

10.12.2020 19:13

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 165

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот что вы можете изменить, чтобы это произошло:

Контроллер:

@PostMapping("/register")
public String submitForm(@ModelAttribute("filename") Filename filename) { 
    ModelAndView view = new ModelAndView("register_form");
    view.addObject("filename", filename);
    return view;
}

Целевая страница:

<!DOCTYPE html>
<html xmlns:th = "http://www.thymeleaf.org">
<head>
<meta charset = "ISO-8859-1">
<title>User Registration</title>
<link href = "https://fonts.googleapis.com/css?family=Lato" rel = "stylesheet">
<link rel = "stylesheet" href = "./css/styles.css">
</head>
<body>
<div class = "container">
<div align = "center">
    <h1>File Finder</h1>
    <form action = "#" th:action = "@{/register}" method = "post" th:object = "${filename}">
        <input type = "text" th:field = "*{filename}" placeholder = "Enter Filepath..."/>
        <button type = "submit">Search</button>    
    </form>
</div>
</div>
<div class = "container" th:if = "${filename.filename != null}">
<div align = "center">
    <h1>Files Found:</h1>
    <span th:text = "${filename.filename}"></span><br/>
</div>
</div>
</body>
</html>

Это должно работать на вас :) Будьте осторожны!

Большое вам спасибо :) Из-за того, как я изменяю ввод (я только что обновил вопрос, чтобы показать это), строка ввода панели поиска заменяется после нажатия «поиск». Как я могу предотвратить это?

— 11.12.2020 00:57

10.12.2020 19:34