在idea中创建一个SpringBoot项目,搭建一个基础的jsp应用场景,就是web端点击一个按钮,发送给服务端hello,服务器端回复一个xinte ,并显示在web客户端。先实现个最简单的b/s 架构流程。
时间: 2024-06-11 15:07:25 浏览: 81
在idea中创建SpringBoot项目
5星 · 资源好评率100%
以下是实现步骤:
1. 在IDEA中创建一个Spring Boot项目,选择Web和Thymeleaf作为依赖。
2. 创建一个Controller类,定义一个RequestMapping为“/hello”。在这个方法中,返回一个字符串“xinte”。
3. 在resources/templates目录下创建一个名为“index”的HTML文件,作为我们的jsp页面。在页面中添加一个表单,包含一个按钮和一个文本框。
4. 在Controller类中添加一个RequestMapping为“/”,返回index页面。
5. 在index页面中添加JavaScript脚本,监听按钮的点击事件,并使用Ajax发送请求到“/hello”接口。在请求成功后,将返回的字符串显示在文本框中。
6. 运行程序,在浏览器中访问http://localhost:8080即可看到我们的页面。点击按钮,即可看到文本框中显示“xinte”。
以下是Controller类的代码示例:
```
@Controller
public class HelloController {
@RequestMapping("/hello")
@ResponseBody
public String hello() {
return "xinte";
}
@RequestMapping("/")
public String index() {
return "index";
}
}
```
以下是index.html的代码示例:
```
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Spring Boot JSP Example</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form>
<input type="text" id="result" name="result" readonly>
<br>
<button type="button" onclick="hello()">Say Hello</button>
</form>
<script>
function hello() {
$.ajax({
url: "/hello",
success: function(data) {
$("#result").val(data);
}
});
}
</script>
</body>
</html>
```
阅读全文