How to transfer data from HTML to controller Spring

问题

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

回答1:

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

回答2:

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"

来源：https://stackoverflow.com/questions/43514945/how-to-transfer-data-from-html-to-controller-spring

标签

java

html

Spring

spring-mvc