表单提交thymeleaf和Spring boot后如何保持在同一页面上？答案

【问题标题】：How to stay on the same page after form submit thymleaf and Spring boot?表单提交thymeleaf和Spring boot后如何保持在同一页面上？
【发布时间】：2019-04-18 20:06:26
【问题描述】：

大家好，我对标题中提到的内容有疑问。是否可以留在同一页面上并提交 .我用 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 我对这个话题还有一个额外的问题。当我想将它重定向到另一个页面时，我得到了一个空白页面。不是错误不是例外只是一个空白页。有什么帮助吗？我是新手。

【问题讨论】：

如果您不想完全重新加载页面，则需要使用 Javascript 和 AJAX 调用。或者，您必须执行经典提交并在提交后重新加载同一页面
我很想在提交后重新加载同一页面，但我只是得到一个空白页面
这是一个非常常见且经常被回答的问题，不是特定于 Spring 的。这可能会让你指向正确的方向：stackoverflow.com/questions/7717820/using-ajax-with-spring-mvc/…

标签： java spring spring-boot redirect thymeleaf

【解决方案1】：

是的，这可以使用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>

变化：

向表单添加了一个 ID。
为您的输入添加了一个 ID。
更改按钮的提交输入类型。

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

您的控制器几乎保持不变。记住要退货。

【讨论】：

是否可以使用相同的方法刷新推文列表？

【解决方案2】：

您的示例未显示 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";
}

reference

如果您希望 thymeleaf 处理推文和 HttpStatus，您可以改为返回类似于以下内容的内容

ModelAndView model = new ModelAndView("your-view");
model.addAttribute(tweet);
model.setStatus(HttpStatus.CREATED);
return model;

【讨论】：