Как остаться на той же странице после отправки формы thymleaf и Spring boot?

Question

Привет, ребята, у меня есть вопрос относительно того, что упомянуто в названии.Можно ли остаться на той же странице и отправить.Я нашел что-то с помощью JavaScript, но он не работает для меня, потому что я использую thymleaf и весеннюю загрузку.Или я просто не знаю, как адаптировать его к моему случаю.

код чабреца:

<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

Да, это возможно, используя 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;
}

Ваш контроллер практически не изменился. Просто не забудьте вернуть что-нибудь.

Answer 2

Ваш пример не показывает, что возвращает метод tweet().Он должен возвращать Tweet объект, но не имеет никакого возвращаемого значения.Что вы пытаетесь сделать с этим возвращаемым значением?Если вы каким-то образом не работаете с Javascript, избавьтесь от @ResponseStatus(CREATED) и верните либо Model, либо String, указывающий на ваш HTML-файл, например:

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