4. 使用SpringMVC框架技术完成JSON数据交互。在页面中输入用户名和密码,页面可以弹出对话框显示用户名和密码数据,控制台也会显示相应数据。
时间: 2024-03-10 07:50:15 浏览: 68
可以使用SpringMVC框架技术完成JSON数据交互,具体实现步骤如下:
1. 在pom.xml文件中添加相关依赖:
```xml
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.3.9</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.12.5</version>
</dependency>
```
2. 在Spring配置文件中配置视图解析器和JSON消息转换器:
```xml
<!-- 配置视图解析器 -->
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/views/" />
<property name="suffix" value=".jsp" />
</bean>
<!-- 配置JSON消息转换器 -->
<bean id="jsonConverter" class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>application/json;charset=UTF-8</value>
</list>
</property>
</bean>
<!-- 配置HandlerAdapter -->
<bean id="handlerAdapter" class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
<property name="messageConverters">
<list>
<ref bean="jsonConverter"/>
</list>
</property>
</bean>
```
3. 在Controller中编写处理请求的方法:
```java
@Controller
@RequestMapping("/user")
public class UserController {
@RequestMapping("/login")
@ResponseBody
public Map<String, Object> login(String username, String password) {
Map<String, Object> result = new HashMap<>();
result.put("username", username);
result.put("password", password);
return result;
}
}
```
在上述代码中,使用@Controller注解标注该类为控制器,使用@RequestMapping注解标注该类的请求路径为/user。在login方法中,使用@RequestMapping注解标注该方法的请求路径为/login,并使用@ResponseBody注解标注该方法返回的是JSON格式的数据。在方法中,将用户名和密码封装为一个Map对象,并返回该对象。
4. 在页面中使用AJAX技术发送请求,并处理返回的JSON数据:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$("#loginBtn").click(function() {
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
url: "/user/login",
type: "POST",
data: {
"username": username,
"password": password
},
dataType: "json",
success: function(data) {
alert("用户名:" + data.username + " 密码:" + data.password);
},
error: function() {
alert("请求失败");
}
});
});
});
</script>
</head>
<body>
<div>
<label>用户名:</label>
<input type="text" id="username">
</div>
<div>
<label>密码:</label>
<input type="password" id="password">
</div>
<div>
<button id="loginBtn">登录</button>
</div>
</body>
</html>
```
在上述代码中,使用jQuery库中的$.ajax方法发送POST请求到/user/login路径,将用户名和密码作为请求参数传递。在请求成功后,使用alert方法弹出对话框显示用户名和密码数据。
5. 运行程序,在浏览器中访问页面,输入用户名和密码,点击登录按钮,即可弹出对话框显示用户名和密码数据,控制台也会显示相应数据。
阅读全文