I have a form for sending first and last name to the js
index.html
<body>
<form name="loginForm" onsubmit="createUser()">
<p > Firstname: </p>
<input type="text" name="firstname" id="firstname" placeholder="firstname"/><br>
<p > Lastname: </p>
<input type="lastname" name="lastname" id="lastname" placeholder="lastname"/><br>
<input id="loginButton" type="submit" value="Create User" >
</form>
<script>
function createUser() {
let firstname = document.forms['loginForm'].elements['firstname'].value;
let lastname = document.forms['loginForm'].elements['lastname'].value;
}
createUser();
</script>
I want that when the create user button is clicked, the data is transferred to the backend and the user is created there.
@PostMapping(value = "/save", consumes = MediaType.APPLICATION_JSON_VALUE)
public void save(@RequestBody Person person) {
personService.save(person);
}
i don’t understand how to redirect data from js to java.
I use MVC and spring boot
Advertisement
Answer
Vaniila JS Ajax: You can send an AJAX request from the client to the server. The POST request in this case sends JSON with 2 parameters: server-var-first-name, server-var-last-name
function createUser() {
let firstname = document.forms['loginForm'].elements['firstname'].value;
let lastname = document.forms['loginForm'].elements['lastname'].value;
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "ajaxfile.php", true);
xhttp.setRequestHeader("Content-Type", "application/json");
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Response code
}
};
var data = {server-var-first-name:firstname,server-var-last-name: lastname};
xhttp.send(JSON.stringify(data));
}