How to transfer data from HTML to the Spring controller

advertisements

I work with Spring Boot. I do not have a web.xml and jsp file

I have a controller that processes the data and writes it to the database.

@RequestMapping(value = "/registration", method = RequestMethod.POST, consumes = MediaType.APPLICATION_JSON_VALUE)
@ApiOperation(value = "Registration user", response = Account.class)
public AccountDto registration(@Valid @RequestBody RegistrationDto registration, HttpServletResponse response) {
    Account account = new Account(registration.getEmail(), registration.getPassword());
    return new AccountDto(account);
}

I checked the controller with the help of the Swagger it works.

And I have an HTML page in which the user enters data.

<body>
    <h1 th:inline="text">Please register</h1>

    <form th:action="@{/logout}" method="post">
        <div>
            <label>
                E-mail:<input type="email" name="email"/>
                Password:<input type="password" name="password"/>
            </label>
        </div>
        <input type="submit" name="registration" value="Registration"/>
    </form>
</body>

How to transfer data from the page to the controller?

Thank you for your help


It depends on what you are using in order to make calls between client (the browser) and server I would use an AJAX call by using JQuery and doing something like this

var dataObj = new Object();
dataObj.email = $("#email").val();
dataObj.password = $("#passord").val();

$.ajax({
url : '/registration',
dataType : 'json',
contentType : 'application/json; charset=UTF-8',
type : 'POST',
data: JSON.stringify(dataObj),
beforeSend : function(){
    //do something before send (e.g. show a message like: please wait)
}); 

},
complete   : function(){
    //do something after sent (e.g. remove the message please wait)
},
success : function(data) {
    //handle the success response
},
error : function(data) {
    //handle the error response
}
});

I hope it's useful

Angelo

EDIT

In order to submit data you can add a listener to the submit in this way (always by using JQuery)

//This is called after the DOM is fully loaded
$(function() {
   $("#mySubmitId").click(function(evt){
       //Prevent the default submit
       evt.preventDefault();
       //call the submit funtion
      submitData();
   });
});

function submitData()
{
    var dataObj = new Object();
    dataObj.email = $("#email").val();
    dataObj.password = $("#passord").val();

    $.ajax({
    url : '/registration',
    dataType : 'json',
    contentType : 'application/json; charset=UTF-8',
    type : 'POST',
    data: JSON.stringify(dataObj),
    beforeSend : function(){
        //do something before send (e.g. show a message like: please wait)
    }); 

    },
    complete   : function(){
        //do something after sent (e.g. remove the message please wait)
    },
    success : function(data) {
        //handle the success response
    },
    error : function(data) {
        //handle the error response
    }
    });
}

Angelo