如何将数据从 HTML 传输到控制器 Spring答案

【问题标题】：How to transfer data from HTML to controller Spring如何将数据从 HTML 传输到控制器 Spring
【发布时间】：2017-09-16 19:37:07
【问题描述】：

我使用 Spring Boot。我没有 web.xml 和 jsp 文件

我有一个控制器来处理数据并将其写入数据库。

@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);
}

我在 Swagger 的帮助下检查了控制器。

我有一个 HTML 页面，用户可以在其中输入数据。

<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>

如何将数据从页面传输到控制器？

感谢您的帮助

【问题讨论】：

您指定了consumes = MediaType.APPLICATION_JSON_VALUE，您必须将Json 数据发送到您的控制器。

标签： java html spring spring-mvc

【解决方案1】：

当您提交表单时，系统会收集表单数据。它获取您所有的输入控件 - 输入、文本区域、选择、复选框等，并发送所有输入的内容。

在您的情况下，当您按下提交按钮时，必须发送数据。您的表单操作是/logout，但控制器需要/registration

改变动作。

还要检查RegistrationDto是否有邮箱和密码字段来获取发送的数据。

正如评论中提到的@Zorglube，尝试删除consumes 并且还应该验证表单是否具有属性 th:object="registration"

【讨论】：

我删除了消费者并更改了
崩溃并报错：用于对象选择的表达式是注册，这是无效的：只有变量表达式(${...}) 在启用 Spring 的环境中的“th:object”属性中是允许的

【解决方案2】：

这取决于您使用什么来在客户端（浏览器）和服务器之间进行调用我会通过使用 JQuery 并执行类似的操作来使用 AJAX 调用

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 
}
});

希望有用

安杰洛

编辑

为了提交数据，您可以通过这种方式向提交添加监听器（总是使用 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 
    }
    });
}

安杰洛

【讨论】：

我理解正确。调用此函数时，数据将以json格式发送到控制器。在这里您可以向用户显示他已注册的消息？ Success: function (data) { // 处理成功响应 },
@Garazd;是的，你可以在提交中添加一个监听器是正确的；查看我的答案的编辑