大家好,我有一个关于标题中提到的内容的问题。是否可以留在同一页面上并提交。我发现了一些 javascript 的东西,但它对我不起作用,因为我正在使用 thymleaf 和 spring boot。或者我只是不知道如何使其适应我的情况。
百里香叶代码:
<form th:action="@{/tweets/tweet}" th:object="${tweet}" method="post">
<div class="row">
<div class="col">
<input type="text" th:field="*{content}" class="form-control" placeholder="What's happening? Tell us!">
</div>
<div class="col">
<input class="form-control" type="submit" value="Submit" />
</div>
</div>
</form>
控制器类:
@Controller
@RequestMapping("tweets")
@Slf4j
public class TweetController {
private TweetService tweetService;
public TweetController(TweetService tweetService) {
this.tweetService = tweetService;
}
@PostMapping("/tweet")
@ResponseStatus(CREATED)
public Tweet tweet(@Valid @ModelAttribute("tweet") Tweet tweet, Principal
principal, BindingResult result) {
if(result.hasErrors()){
//do somethign
}
if (!tweet.getContent().equals(null) && !tweet.getContent().equals("") && !tweet.getContent().isEmpty()) {
tweetService.createTweet(tweet.getContent(), principal);
}
}
@GetMapping("/")
public String goToIndex(Model model){
model.addAttribute("tweet",new Tweet());
return "overview";
}
我有
server.context-path=/api
我对这个主题还有一个附加问题。当我想将其重定向到另一个页面时,我得到了一个空白页面。不是错误,不是异常,只是一个空白页。有什么帮助吗?我对此很陌生。
是的,可以使用
ajax
。不过,我建议使用 jQuery
来完成此操作。因此,如果您想提交表单并留在同一页面,您可以执行以下操作。
HTML
<form id="tweet-form" th:action="@{/tweets/tweet}" th:object="${tweet}" method="post">
<div class="row">
<div class="col">
<input type="text" th:field="*{content}" class="form-control" placeholder="What's happening? Tell us!">
</div>
<div class="col">
<input id="submit-form" class="form-control" type="button" value="Submit" />
</div>
</div>
</form>
变化:
jQuery
$('#submit-form').on('click', function() {
var form = $('#tweet-form');
$.ajax({
url: form.attr('action'),
data: form.serialize(),
type: post,
success: function(result) {
// Do something with the response.
// Might want to check for errors here.
}, error: function(error) {
// Here you can handle exceptions thrown by the server or your controller.
}
})
}
控制器
@PostMapping("/tweet")
@ResponseStatus(CREATED)
public Tweet tweet(@Valid @ModelAttribute("tweet") Tweet tweet, Principal
principal, BindingResult result) {
if(result.hasErrors()){
// Throw an exception or send a null Tweet.
}
if (!tweet.getContent().equals(null) && !tweet.getContent().equals("") && !tweet.getContent().isEmpty()) {
tweetService.createTweet(tweet.getContent(), principal);
}
// You are returning a Tweet, so you must return something.
return tweet;
}
您的控制器几乎保持不变。只要记得归还一些东西即可。
您的示例没有显示
tweet()
方法返回的内容。它应该返回一个 Tweet
对象,但没有任何返回值。您想用该返回值做什么?如果您不以某种方式使用 Javascript 处理它,则摆脱 @ResponseStatus(CREATED)
并返回指向您的 html 文件的 Model
或 String
,如下所示:
@PostMapping("/tweet")
public String tweet(@Valid @ModelAttribute("tweet") Tweet tweet, Principal
principal, BindingResult result) {
if(result.hasErrors()){
//do somethign
}
if (!tweet.getContent().equals(null) && !tweet.getContent().equals("") && !tweet.getContent().isEmpty()) {
tweetService.createTweet(tweet.getContent(), principal);
}
return "redirect:/name-of-html-file";
}
如果您希望 thymeleaf 处理推文和 HttpStatus,您可以返回类似于
的内容ModelAndView model = new ModelAndView("your-view");
model.addAttribute(tweet);
model.setStatus(HttpStatus.CREATED);
return model;
如果您有本地 URI
/tweet
,应该会导致下载文件 tweet.zip
,同时停留在同一页面上,请执行以下操作:
HTML
<a th:href="@{|/tweet|}" download>Tweet</a>
Java 控制器
@GetMapping("/tweet")
@ResponseBody
public FileSystemResource tweet(
HttpServletResponse response
) {
response.setHeader("Content-Disposition", "attachment; filename=tweet.zip");
response.setContentType("application/zip");
File zip = ...; // create your own ZIP file here
return new FileSystemResource(zip);
}