本文详细阐述了如何在spring boot应用中，无需创建pojo类或jsp页面，直接通过html表单将数据发送到控制器。主要介绍了两种方法：一是利用html表单的`action`属性配合spring的`@requestparam`注解进行直接提交；二是使用javascript（如fetch api）进行异步数据提交，并提供相应的代码示例和注意事项，旨在帮助开发者高效处理前端表单数据。
在构建Web应用时，从前端HTML表单收集用户输入是常见的需求。对于简单的表单数据，我们通常希望能够直接将其发送到Spring Boot控制器，而无需引入额外的POJO（Plain Old Java Object）进行数据绑定，或使用JSP等视图技术。本文将介绍两种主要的方法来实现这一目标：传统的HTML表单直接提交和使用JavaScript进行异步提交。
最直接且无需JavaScript的方法是利用HTML表单的内置提交机制，结合Spring框架的@RequestParam注解来接收数据。
为了使HTML表单能够直接将数据发送到后端，需要满足以下条件：
以下是一个修改后的HTML表单示例：
立即学习“前端免费学习笔记（深入）”；
<body>
<form action="/posting" method="post" id="form">
<label for="someInput">输入内容:</label>
<input type="text" id="someInput" name="someName"/>
<button type="submit" id="button2">提交</button>
</form>
</body>在这个示例中：
在Spring Boot控制器中，使用@PostMapping注解映射请求路径，并利用@RequestParam注解来获取前端发送的参数。
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
@RestController // 或者 @Controller，根据返回类型选择
public class MyController {
@PostMapping("/posting")
public String po(@RequestParam("someName") String someName) {
// someName 将直接接收到前端 input 框中名为 "someName" 的值
return "Hello, " + someName + "!";
}
}在这个控制器方法中：
如果需要更动态、无刷新的用户体验，可以使用JavaScript（如XMLHttpRequest、Fetch API或jQuery ajax）来异步提交表单数据。这里以现代的Fetch API为例进行说明。
当使用JavaScript进行异步提交时，HTML表单的action和method属性不再是必需的，因为我们通过JS来控制请求。但<input>的name属性仍然重要，因为它定义了数据的键。
<body>
<form id="form">
<label for="someInput">输入内容:</label>
<input type="text" id="someInput" name="someName"/>
</form>
<button type="button" id="submitButton">异步提交</button>
<script src="script.js"></script>
</body>注意，这里的按钮type="button"，不会触发原生表单提交。
Fetch API提供了一种现代、强大的方式来发送网络请求。我们可以获取输入框的值，然后将其作为请求体的一部分发送。
// script.js
document.getElementById("submitButton").onclick = function() {
// 获取表单中名为 "someName" 的 input 元素的值
var inputValue = document.querySelector('#form input[name="someName"]').value;
// 构建 URLSearchParams 对象，用于发送 application/x-www-form-urlencoded 格式的数据
// 键 'someName' 必须与 Spring Boot 控制器中的 @RequestParam 参数名匹配
var data = new URLSearchParams();
data.append('someName', inputValue);
fetch('/posting', {
method: 'POST',
headers: {
// 明确指定 Content-Type，告知服务器数据格式
'Content-Type': 'application/x-www-form-urlencoded',
},
body: data // 将构建好的数据作为请求体
})
.then(response => {
if (!response.ok) {
throw new Error('网络响应不佳');
}
return response.text(); // 或者 response.json()，取决于后端返回类型
})
.then(result => {
console.log('服务器响应:', result);
alert('提交成功: ' + result);
// 可以在这里更新UI，例如清空输入框
document.querySelector('#form input[name="someName"]').value = '';
})
.catch(error => {
console.error('提交失败:', error);
alert('提交失败，请查看控制台');
});
};对于异步提交，如果前端发送的是application/x-www-form-urlencoded格式的数据（如上面Fetch API示例），Spring Boot控制器仍然可以使用@RequestParam来接收。
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class MyController {
@PostMapping("/posting")
public String po(@RequestParam("someName") String someName) {
// 异步提交的数据同样通过 @RequestParam 接收
return "Async Hello, " + someName + "!";
}
}控制器代码与直接表单提交时完全相同，因为@RequestParam机制不关心数据是如何发送到服务器的，只要请求参数的格式符合要求即可。
通过本文的介绍，您应该能够理解并实践如何在Spring Boot应用中，灵活地处理来自HTML表单的数据，无论是通过传统的直接提交还是现代的异步提交方式，都无需依赖POJO或JSP，从而提高开发效率和应用的灵活性。
以上就是Spring Boot 控制器接收HTML表单数据：无需POJO的实践指南的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
265
