SpringMVC:Ajax初体验
以下是一个简单的Spring MVC项目，使用Ajax进行前后端交互的示例。
- 创建一个Spring MVC项目，并添加必要的依赖（比如spring-webmvc、jquery）。
- 配置Spring MVC的Controller：
@Controller
public class AjaxController {
@RequestMapping(value = "/greeting", method = RequestMethod.GET)
@ResponseBody
public Map<String, Object> greeting(@RequestParam String name) {
Map<String, Object> model = new HashMap<>();
model.put("message", "Hello, " + name + "!");
return model;
}
}- 创建一个HTML页面，使用Ajax调用上述的
/greeting端点：
<!DOCTYPE html>
<html>
<head>
<title>Ajax Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#ajaxButton").click(function() {
$.ajax({
url: "/greeting",
data: { name: $("#nameField").val() },
success: function(data) {
$("#greeting").text(data.message);
},
error: function(error) {
console.log("Error: ", error);
}
});
});
});
</script>
</head>
<body>
<input type="text" id="nameField" placeholder="Enter your name">
<button id="ajaxButton">Say Hello</button>
<div id="greeting">Response will be displayed here.</div>
</body>
</html>在这个例子中，当用户点击按钮时，一个Ajax请求会发送到/greeting端点，并带上用户在文本框中输入的名字。Controller处理请求并返回一个JSON对象，包含一个message字段。然后，这个message会被显示在页面上指定的位置。这就是一个简单的Spring MVC和Ajax的交互示例。
评论已关闭