[英]Handle form submission on same page Spring Boot
I am making a thymeleaf Spring Boot web application that takes in a filepath as input to a search bar and outputs the directories/files at that filepath.我正在制作一个 thymeleaf Spring 启动 web 应用程序,它将文件路径作为搜索栏的输入并在该文件路径中输出目录/文件。 Currently the result are rendered on a separate thymeleaf page, but I am wondering how to change it so that the result is rendered on the same page, just below the search bar?
目前,结果呈现在单独的 thymeleaf 页面上,但我想知道如何更改它以使结果呈现在同一页面上,就在搜索栏下方?
Main Controller主Controller
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 Input/Landing Page with Search Bar 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>
Thymeleaf Output Page Thymeleaf Output 页
<!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>
Filename.java文件名.java
public class Filename {
private String filename;
public String getFilename() {
return filename;
}
public void setFilename(String filename) {
this.filename = Filewalk.filewalk(filename);
}
}
Filewalk.java program takes in file path and outputs files/directories contained at that file path 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;
}
}
That's what you can change to make it happen:这就是您可以更改以实现它的方式:
Controller: Controller:
@PostMapping("/register")
public String submitForm(@ModelAttribute("filename") Filename filename) {
ModelAndView view = new ModelAndView("register_form");
view.addObject("filename", filename);
return view;
}
Landing Page:登陆页面:
<!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>
This one should work for you:) Take care!这个应该适合你:)保重!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.