springboot删除一行，然后显示/重新加载相同的页面(没有该行)

Question

在此处输入图像描述在此处输入图片描述我想从表中删除数据，删除一行后，应该重新加载表页面(没有该行，例如删除(单行被完美地删除，但我看到的不是重新加载"；request:/form"；浏览器上的文本。

请帮帮我，因为我是新手。感谢

-------------------------------
****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>

Answer 1

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

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

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

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

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

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

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

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

说了这么多，你试图处理删除操作的方式不是一个好的做法。

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

关于如何在春季处理表单提交的参考：https://spring.io/guides/gs/handling-form-submission/