表單提交百葉窗和Spring引導后如何保持在同一頁面上？

Question

大家好，我對標題中提到的內容有疑問。 是否可以留在同一頁面上並提交。 我發現了一些使用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我對此主題還有一個其他問題。 當我想將其重定向到另一頁時，我得到了一個空白頁。 不是錯誤，不是例外，只是空白頁。 有什么幫助嗎？ 我是新來的。

Answer 1

您的示例未顯示tweet()方法返回的內容。 它應該返回一個Tweet對象，但是沒有任何返回值。 您打算如何處理該返回值？ 如果您@ResponseStatus(CREATED)沒有使用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";
}

參考

如果您希望百里香葉處理推文和HttpStatus，則可以返回以下內容：

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

Answer 2

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

您的控制器幾乎保持不變。 只要記住要退貨即可。