Spring MVC 4和Thymeleaf - 防止页面刷新 [英] Spring MVC 4 and Thymeleaf - Prevent page refresh

问题描述

我保证，我已经用Google搜索了这个。

我有一个Spring MVC 4应用程序，它使用Thymeleaf收集表单数据并将其放入数据库。工作得非常好，除了我希望我的应用程序在用户点击提交按钮后将其留在表单页面上，以便他们可以继续编辑。

每次单击提交时，都会调用Controller并返回视图，从而刷新页面。我想消除刷新并添加警报以确认保存。

所以我开始将表单提交转换为AJAX，并意识到这会失败使用Thymeleaf的目的。 Thymeleaf已经将表单字段映射到支持bean并且运行良好，那么为什么要替换该机制呢？

那么，有没有办法让Spring MVC控制器处理提交请求但不返回视图的新实例？

我尝试不返回视图，但这导致错误，因为没有任何内容映射到模型属性。我尝试使用@ResponseBody并返回数据，但这导致JSON在网页中呈现，而且我无法弄清楚如何获取该数据并使用它做一些事情。

我还试图找到一种方法来挂钩提交按钮，尝试调用javascript的preventDefault（），但那里没有任何运气。

非常感谢您的建议...

这是我的控制器代码，非常简单：

  @SessionAttributes（adminFormAjax）
 @Controller 
 public class TestController 
 {
 @Autowired 
私有AdminDataRepository代表; 
 
 @RequestMapping（value =/ admin_ajax，method = RequestMethod.GET）
 public String adminFormAjax（Model model）
 {
 AdminData ad = rep.findById （1L）; 
 
 //如果没有配置记录，请创建一个并将主键指定为1. 
 if（ad == null）
 {
 ad = new AdminData（）; 
 ad.setId（1L）; 
} 
 
 model.addAttribute（adminFormAjax，ad）; 
返回adminFormAjax; 
} 
 
 @RequestMapping（value =/ admin_ajax，method = RequestMethod.POST）
 public @ResponseBody AdminData adminSubmit（@ModelAttribute（adminFormAjax）AdminData ad，Model model）
 {
 // rep.save（ad）; 
 model.addAttribute（adminFormAjax，ad）; 
返回广告; 
} 
 
} 
  

解决方案

因此，如果您希望能够在不更改页面的情b $ b

您肯定需要使用javascript / ajax发布表单内容并保持页面不变。

如果您只想更新该部分例如，您可以执行的操作是调用控制器方法，该方法返回一个片段并显示包含相关表单信息的片段。

I promise, I have Googled the heck out of this.

I have a Spring MVC 4 app that uses Thymeleaf to collect form data and put it into a database. Works very well, except that I want my application to leave the user on the form page after they hit the submit button, so that they can keep editing.

Each time they click submit, the Controller is called and returns the view, which causes the page to refresh. I would like to eliminate the refresh and also add an alert to confirm the save.

So I started to work on converting the form submission to AJAX and realized that this would defeat the purpose of using Thymeleaf. Thymeleaf already maps the form fields to the backing bean and does so well, so why replace that mechanism?

So, is there a way to have the Spring MVC controller process the submit request but not return a new instance of the view?

I tried not returning the view but this caused an error because nothing was mapped to the model attribute. I tried using @ResponseBody and returning data instead but this caused the JSON to be rendered in the web page, plus I could not figure out how to get that data bask and do something with it.

I also tried to find a way to hook into the submit button to try calling javascript preventDefault() but didn't have any luck there.

Thanks very much for your suggestions...

Here is my controller code, very straightforward:

@SessionAttributes("adminFormAjax")
@Controller
public class TestController 
{
    @Autowired
    private AdminDataRepository rep;

    @RequestMapping(value="/admin_ajax", method=RequestMethod.GET)
    public String adminFormAjax(Model model) 
    {
        AdminData ad = rep.findById(1L);

        // If there is no configuration record, create one and assign the primary key as 1.
        if(ad == null)
        {
            ad = new AdminData();
            ad.setId(1L);
        }

        model.addAttribute("adminFormAjax", ad);
        return "adminFormAjax";
    }

    @RequestMapping(value="/admin_ajax", method=RequestMethod.POST)
    public @ResponseBody AdminData adminSubmit(@ModelAttribute("adminFormAjax") AdminData ad, Model model) 
    {
        // rep.save(ad);
        model.addAttribute("adminFormAjax", ad);
        return ad;
    }

}

解决方案

So thymeleaf will render the page as a HTML and sends it to client to display, if you want to be able to submit form data to controller without changing pages you need to incorporate Javascript.

You definitely need to use javascript/ajax to post the form contents and keep the page as it is.

If you want to update just the section that contains the form for example what you can do is make a call to a controller method that returns a fragment and display the fragment containing the relevant form information.

这篇关于Spring MVC 4和Thymeleaf - 防止页面刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！