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

Posted 2023-02-24

【中文标题】spring boot 删除一行，然后显示/重新加载同一页面（没有该行）

【英文标题】：springboot delete a row and after that show / reload same page (without that row)

【发布时间】：2020-11-10 00:40:30

【问题描述】：

enter image description hereenter image description here我想从表中删除数据，并在删除一行后重新加载表页（没有该行，例如删除） 单行被完美删除，但我在浏览器上看到“request:/form”文本而不是重新加载。

帮助我，因为我是 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>

【问题讨论】：

添加调用提交函数的代码。

请贴出实际代码和图片。

什么请求类型是删除方法（GET、POST、DELETE）？请分享您的 WebApplicationController 的代码，您可以在其中为请求配置 HTML 页面。

添加删除、获取所有数据和控制器文件代码。

【参考方案1】：

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

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

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

尝试 1： 在您的 HomeController.java 中，而不是 return "redirect:/form/" 尝试 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/

【讨论】：

谢谢@kousick shanmugam nagaraj先生