Как остаться на той же странице после отправки формы thymleaf и Spring boot?
Привет, ребята, у меня вопрос по поводу того, что упомянуто в заголовке. Можно ли остаться на той же странице и представить. Я нашел кое-что с 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
У меня есть еще один дополнительный вопрос к этой теме. Когда я хотел перенаправить его на другую страницу, я получал пустую страницу. Не ошибка, не исключение, просто пустая страница. Любая помощь ? Я новичок в этом.
Я бы хотел перезагрузить ту же страницу после отправки, но я просто получаю пустую белую страницу
Это довольно распространенный вопрос, на который часто отвечают, и он не относится к Spring. Это может указать вам правильное направление: stackoverflow.com/questions/7717820/using-ajax-with-spring-m vc /…
Ответы 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;
Да, это возможно с использованием 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;
}
Ваш контроллер почти не изменился. Только не забудьте что-нибудь вернуть.
можно ли обновить список твитов, используя ту же методологию?
Вам нужно использовать вызовы Javascript и AJAX, если вы не хотите полностью перезагружать страницу. В качестве альтернативы вы должны выполнить классическую отправку и перезагрузить ту же страницу после отправки.