时间戳

首页 > 解决方案 > springboot 删除一行，然后显示/重新加载同一页面（没有该行）

java - springboot 删除一行，然后显示/重新加载同一页面（没有该行）

问题描述

在此处输入图像描述 在此处输入图像描述我想从表中删除数据，在删除一行后，应该重新加载表页面（没有该行，例如删除）单行被完美删除，但我看到的是“请求：/表单”而不是重新加载浏览器上的文字。

帮助我，因为我是springboot的新手。谢谢

   -------------------------------
    ****homecontroller.java****
    ---------------------------
        
@Controller
@RequestMapping("/form")
@CrossOrigin
public class HomeController {
    @Autowired
    private StarFormRepository starFormRepositoy;
    
    @RequestMapping(value = "", method = RequestMethod.POST)
    public StarForm saveForm(@RequestBody StarForm starForm) {
        return this.starFormRepositoy.save(starForm);
    }

    @RequestMapping(value ="/get", method = RequestMethod.GET)
    public Iterable<StarForm> StarFormGet()
    {
        return this.starFormRepositoy.findAll();
        
    }
    
    @RequestMapping("/form/delete/{id}")
        public String delete(@PathVariable long id) {
            starFormRepositoy.deleteById(id);
            return "redirect:/form/";
        }

}

--------------------------------------------
****index.html****
--------------------------------------------


      <script>
$(document).ready(function(){
$.ajax({ url: "/form/get",
        success: function(data){
               var $tbody = $('#t1');
                $.each( data, function( i, val ) {
                console.log(val)
                var $div = $("<tr>");
                var url = "/form/delete/" + val.id;
                $div.append("<td>" + val.id + "</td>")
                $div.append("<td>"+ val.name +"</td>")
                $div.append("<td>"+ val.fName +"</td>")
                $div.append("<td>"+ val.mName +"</td>")
                $div.append("<td>"+ val.lName +"</td>")
                $div.append("<td>"+ val.age +"</td>")
                $div.append("<td>"+ val.associatedRotaryClub +"</td>")
                $div.append("<td>"+ val.associatedRotaryClubOther +"</td>")
                $div.append("<td>"+ val.rotaryAlumni +"</td>")
                $div.append("<td>"+ val.rotaryAlumniOther +"</td>")
                $div.append("<td>"+ val.firstContact +"</td>")
                $div.append("<td>"+ val.secondContact +"</td>")
                $div.append("<td>"+ val.email +"</td>")
                $div.append("<td>"+ val.bizAddress +"</td>")
                $div.append("<td>"+ val.eduQualification +"</td>")
                $div.append("<td>"+ val.website +"</td>")
                $div.append("<td>"+ val.bizCategory +"</td>")
                $div.append("<td>"+ val.resAddress +"</td>")
                $div.append("<td>"+ val.preferredComm +"</td>")
                $div.append("<td>"+ val.joiningInterest +"</td>")
                $div.append("<td>"+ val.joiningInterestOther +"</td>")
                $div.append("<td><a href="+url+">delete</a></td>")
                $tbody.append($div);                    
            });
        }});
});
 </script>  

<script>
  submit = function() {
    console.log($('#name'));
    var data = {
      name : $('#name').val(),
      fName : $('#fName').val(),
      mName : $('#mName').val(),
      lName : $('#lName').val(),
      age : $('#age').val(),
      associatedRotaryClub : $('input[name=associatedRotaryClub]:checked').val(),
      associatedRotaryClubOther : $('#associatedRotaryClubOther').val(),
      rotaryAlumni : $('input[name=rotaryAlumni]:checked').val(),
      rotaryAlumniOther : $('input[name=rotaryAlumniOther]:checked').val(),
      firstContact : $('#firstContact').val(),
      secondContact : $('#secondContact').val(),
      email : $('#email').val(),
      bizAddress : $('#bizAddress').val(),
      eduQualification : $('#eduQualification').val(),
      website : $('#website').val(),
      bizCategory : $('#bizCategory').val(),
      resAddress : $('#resAddress').val(),
      preferredComm : $('input[name=preferredComm]:checked').val(),
      joiningInterest : $('input[name=joiningInterest]:checked').val(),
      joiningInterestOther : $('#joiningInterestOther').val()
    }
    console.log(data);
   $.ajax({
    type: 'POST',
    url: '/form',
    data: JSON.stringify(data),
    success: function(data) { alert('data: ' + data); },
    contentType: "application/json",
    dataType: 'json'
});
}
</script>

标签： javamysqlajaxspring-boothibernate

解决方案

这就是我认为的问题所在，您正在尝试将其重定向到"redirect:/form/"，但在您的控制器中，我没有看到映射到默认/获取请求的请求。

另一个问题是您的 html 是 index.html，并且简单地重定向到是/form/行不通的。

我建议您进行以下更改并尝试。

尝试 1：在您的 HomeController.java 中，而不是return "redirect:/form/"try return "index"。当您点击删除时，这应该会再次呈现您的 index.html。

尝试 2：如果这不起作用，您可能必须为默认/GET 请求添加 RequestMapping，如下所示。

在您的 HomeController.java 中添加以下代码。

@RequestMapping(value = "/", method = RequestMethod.GET)
public String redirectHome() {
    return "index";
}

这应该可以解决您的问题。

说了这么多，您尝试处理删除操作的方式并不是一个好习惯。

  • 根据 REST 原则，删除请求必须是 RequestType DELETE。
  • 您的 Delete 控制器方法应该只删除该行，并返回成功。
  • UI 上的删除按钮必须是一个调用删除 API 的 javascript Ajax 函数的触发器，并在成功时从表中删除该行，而不是使用锚标记重定向<a>

Spring中如何处理Form Submit的参考：https ://spring.io/guides/gs/handling-form-submission/

推荐阅读