sending data from ajax to spring controller: Required String parameter is not present

I know there are already a lot questions about this error message, but nothing helped me to fix my problem.

I'm trying to activate a User account through a table which contains the email, first and last name and a checkbox for each entry.
First you check the checkboxes for which user(s) you want to unlock and then you press a button to send your request, the Controller would then just change the "activated" status from the selected user(s) from 0 for deactivated to 1 for activated.

I have a HTML, a JavaScript and a Java Controller file.
Note that I'm currently trying this on localhost and have turned of google chromes cross origin by launching Chrome per cmd with chrome.exe --disable-web-security --allow-file-access-from-files

I want to unlock the user by their email adress in the MainController.java which currently only does a sysout because so far I don't even get to that method because of the error.

I already tried changing the @RequestParam to @RequestBody but it just gives me the error Required request body is missing.

So I quess the main problem is that the email adress I'm getting from the table is not passed on to the Controller, but how do I do that correctly?

what the table looks like:
screenshot of the table

the unlock.html

<div id="background">
<div id="scroll-horizontal">
<form id="table-form" method="POST" action="http://localhost:8080/mitglied/unlockUpdate">
<table id="table">
<tr>
<th>E-Mail</th>
<th>Vorname</th>
<th>Nachname</th>
<th><input id="unlock-all" type="checkbox"></th>
</tr>
</table>
<input id="unlock-btn" type="submit" value="Freischalten"></input>
</form>
</div>
</div>
<script src="../static/js/unlock.js "></script>

the JavaScript file unlock.js

jQuery(document).ready(function() {
$.getJSON("http://localhost:8080/mitglied/unlock", function(data) {
var table_data = "";
$.each(data, function(key, value) {
table_data += "<tr>";
table_data += "<td>" + value.email + "</td>";
table_data += "<td>" + value.vorname + "</td>";
table_data += "<td>" + value.nachname + "</td>";
table_data += "<td class=" + "unlock-checkbox" + " style=" + "text-align:center" + "><input type=" + "checkbox" + "></input></td>";
table_data += "</tr>";
});
$("#table").append(table_data);
});
jQuery('#table-form').submit(function() {
var rows = document.getElementsByTagName("tr");
for (var i = 1; i < rows.length; i++) {
var cols = rows[i].getElementsByTagName("td");
var checkbox = cols[3].getElementsByTagName("input")[0];
if (checkbox.checked) {
var email = cols[0].innerHTML;
$.ajax({
url: $(this).attr('action'),
method: 'POST',
data: { email: email },
success: function(data) {
console.log("success, email: " + email);
alert("success");
},
error: function() {
alert("error");
}
});
}
console.log(checkbox.checked);
}
});
});

and the MainController.java

@Controller
@RequestMapping(path="/mitglied") public class MainController {
@Autowired
private MitgliederRepository mitgliedRepository;
@PostMapping(path="/unlockUpdate")
public @ResponseBody void unlockSelectedUsers(@RequestParam String email) {
System.out.println(email);
}

the complete error message (on localhost:8080/mitglied/unlockUpdates) is:

Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.

Fri Apr 10 13:43:42 CEST 2020
There was an unexpected error (type=Bad Request, status=400).
Required String parameter 'email' is not present

After trying a lot of stuff this is the solution I landed on and works for me

Note that the divs changed and it's no longer a form, the action is now handled via an onclick function. And I already styled it so divs are different now.

the unlock.html

<div id="background">
<div id="frame">
<h1 id="table-title">Freischaltung</h1>
<div id="scroll">
<table id="table">
<thead>
<tr>
<th>E-Mail</th>
<th>Vorname</th>
<th>Nachname</th>
<th><input id="unlock-all" type="checkbox"></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="btn-container">
<button id="unlock-btn" onclick="submit()">Freischalten</button>
</div>
</div>
</div>
<script src="../static/js/unlock.js "></script>

the JavaScript file unlock.js

jQuery(document).ready(function() {
updateTable();
});
function updateTable() {
$.getJSON("http://localhost:8080/mitglied/unlock", function(data) {
var table_data = "";
$.each(data, function(key, value) {
table_data += "<tr>";
table_data += "<td>" + value.email + "</td>";
table_data += "<td>" + value.vorname + "</td>";
table_data += "<td>" + value.nachname + "</td>";
table_data += "<td class=" + "unlock-checkbox" + "><input type=" + "checkbox" + "></input></td>";
table_data += "</tr>";
});
$("#table").append(table_data);
});
}
function submit() {
var rows = document.getElementsByTagName("tr");
//get the checked value for each table row
for (var i = 1; i < rows.length; i++) {
var cols = rows[i].getElementsByTagName("td");
var checkbox = cols[3].getElementsByTagName("input")[0];
if (checkbox.checked) {
var email = cols[0].innerHTML;
$.ajax({
type: 'POST',
url: 'http://localhost:8080/mitglied/unlockUpdate',
data: { 'email': email },
success: function(msg) {
alert("success");
window.location.reload();
}
});
}
}
}

and the MainController.java

@Controller
@RequestMapping(path="/mitglied") public class MainController {
@Autowired
private MitgliederRepository mitgliedRepository;
@RequestMapping(path="/unlockUpdate", method = RequestMethod.POST)
public @ResponseBody void unlockSelectedUsers(@RequestParam (required=false) String email) {
Iterable<Mitglied> mitglieder = mitgliedRepository.findAll();
List<Mitglied> mitgliederListe = new ArrayList();
mitglieder.iterator().forEachRemaining(mitgliederListe::add);
for (Mitglied m : mitgliederListe) {
if (m.getEmail().equals(email)) {
m.setFreigeschaltet(true);
mitgliedRepository.save(m);
break;
}
}
System.out.println(email);
}