How to transfer data from HTML to controller Spring

Question

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

You specified `consumes = MediaType.APPLICATION_JSON_VALUE`, you have to send Json data to your controller. — Zorglube, Apr 20 '17 at 09:44

Angelo Immediata · Accepted Answer · 2017-04-20T11:00:17.597

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

I understand correctly. When this function is called, the data will be sent in json format to the controller. And here you can display a message to the user that he is registered? Success: function (data) { // handle the success response }, — Garazd, Apr 20 '17 at 10:54
@Garazd; yes it's correct you can add a listener to the submit; see the edit of my answer — Angelo Immediata, Apr 20 '17 at 10:56

score 0 · Answer 2 · edited Apr 20 '17 at 09:58

0

When you submit the form the form data is collected. It gets all your input controls - inputs, textareas, selects, checkboxes etc. and sends all the entered content.

In your case when you press submit button the data must be sent. Action of your form is /logout but controller expects /registration

Change the action.

Also check whether RegistrationDto has email and password fields to obtain sent data.

And as @Zorglube mentioned in the comment try to just remove the consumes And also should verify the form have the attribute th:object="registration"

edited Apr 20 '17 at 09:58

cralfaro

5,822
3
20
30

answered Apr 20 '17 at 09:45

StanislavL

56,971
9
68
98

I deleted consumers and changed
crashes with an error: The expression used for object selection is registration, which is not valid: only variable expressions (${...}) are allowed in 'th:object' attributes in Spring-enabled environments
– Garazd Apr 20 '17 at 10:42

How to transfer data from HTML to controller Spring

2 Answers2

Linked