Spring MVC 学习笔记 --- [SpringMVC的数据响应(Ajax提交请求后,用JSON格式响应数据)]
Posted 小智RE0
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Spring MVC 学习笔记 --- [SpringMVC的数据响应(Ajax提交请求后,用JSON格式响应数据)]相关的知识，希望对你有一定的参考价值。
本文紧接之前的文章–> Spring MVC 学习笔记(2) — [SpringMVC的几个注解标签说明,获取请求数据,springmvc提供的中文乱码过滤配置]
Ajax提交请求后,用JSON格式响应数据
在上一篇笔记中,完成了后台对前端数据的接收;那么,现在就是将数据转为json格式,发送到前端展示;
这里就写个案例,进行数据回显;
现在需要json工具包;这里选择用jackson
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.1</version>
</dependency>
且在响应数据的时候无需调用,用注解@ResponseBody将 controller 控制层的方法返回对象通过转换器转换为指定的格式之后，写入到 response 对象的 body 区，通常用来向异步请求返回 JSON 数据。
注意：使用这个注解后不会走视图处理器，而是直接将数据写入到输入流中，
和之前的response对象通过printWriter()打印流,然后通过Json工具包的toJson方法返回指定的JSON格式数据,效果是一样的.
然后在返回数据时,会通过一个包含状态码code,回显信息msg,以及数据data;属性的公共返回类ResultCommon;将返回的数据封装到公共返回类对象中;
案例搭建
案例,对登陆时的账号进行验证;
实际上,就是用框架对之前做的这个demo进行了一点改进
[简易的网站登录注册,注销退出操作]
使用数据库 : mysql 8.0.22
开发工具IDEA 2020.2.1版
jdk版本 1.8
maven版本 : 3.8.3
tomcat版本: 9.0.48
(1)数据库
#spring整合mybatis时使用的数据表;
CREATE TABLE IF NOT EXISTS t_spandmb(
id INT PRIMARY KEY AUTO_INCREMENT COMMENT 'ID号',
`name` VARCHAR(20) COMMENT '姓名',
`password` VARCHAR(10) COMMENT '密码',
`age` INT COMMENT '年龄',
`birthday` DATE COMMENT '生日'
);
(2)前端页面
这里前端页面,实际上,我用了之前自己写的这个页面,觉得还不错就一直在用;
[简易的网站登录注册,注销退出操作]
登陆页面loginin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>登录首页</title>
<!-- 样式表修饰 ,引入外部的样式表-->
<link type="text/css" rel="stylesheet" href="css/login.css" />
<!--部署JQuery-->
<script src="js/jquery.1.8.3.min.js" type="text/javascript"></script>
<!-- JS事件 -->
<script type="text/javascript">
function toLogin()
/* 先取到账户框和密码框的值 */
var accountVal = $("#accountId").val();
var passwordVal = $("#passwordId").val();
if((accountVal.trim()).length==0)
$("#outbox_form_account_error").html("用户名不能为空!");
else if((passwordVal.trim()).length == 0 )
$("#outbox_form_password_error").html("密码不能为空!");
else if((passwordVal.trim()).length > 6)
$("#outbox_form_password_error").html("密码最多6位哦!");
else
/*发送请求,将表单的数据提交过去*/
$.post("wantLogin/toLogin",$("#formId").serialize(),function (res)
console.log(res)
if(res.code===201||res.code===500)
//若出现账号不粗案子啊或者服务器异常,弹出提示信息;
alert(res.msg);
else if(res.code === 200)
//将数据存入session;
window.sessionStorage.setItem("people",res.data.name);
//跳转到简易的成功页面;
location.replace("mysuccess.html");
,"json");
/* 考虑到提示信息持久性的不能消失;就让输入框,密码框的聚焦事件去清除 */
function reAcErr()
$("#outbox_form_account_error").html("");
function rePassErr()
$("#outbox_form_password_error").html("");
</script>
</head>
<body style="background-image: url(./images/pc.gif);background-size: cover; ">
<!-- 包裹注册栏的大盒子 -->
<div id="outbox">
<div id="outbox_welcome">
欢迎登录
</div>
<!-- 填写的表单 -->
<div id="outbox_form">
<!--表单使用 autocomplete="off"属性,可避免浏览器记忆输入记录-->
<form id="formId" autocomplete="off">
<!-- 账户框以及提示信息弹出位置 -->
<div id="outbox_form_account">
<div id="outbox_form_account_char">账户:</div>
<div id="outbox_form_account_in">
<label for="accountId"></label>
<input id="accountId" type="text" name="name" placeholder="请输入账户名:" onfocus="reAcErr()" />
</div>
<!-- 提示信息框,在页面中配合javascript事件使用 -->
<div id="outbox_form_account_error"></div>
</div>
<!-- 密码框以及提示信息弹出位置 -->
<div id="outbox_form_password">
<div id="outbox_form_password_char">密码:</div>
<div id="outbox_form_password_in" >
<label for="passwordId"></label>
<input id="passwordId" type="password" name="password" placeholder="请输入密码:" onfocus="rePassErr()"/>
</div>
<!-- 提示信息框,在页面中配合javascript事件使用 -->
<div id="outbox_form_password_error"></div>
</div>
<!-- 登录按钮位置 -->
<div id="outbox_form_loginbtn">
<input id="loginbtn" type="button" value="登录" onclick="toLogin()" />
</div>
</form>
</div>
</div>
</body>
</html>
一个简单的登录成功页面mysuccess.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模登录成功页面</title>
<!--部署JQuery-->
<script type="text/javascript" src="js/jquery.1.8.3.min.js"></script>
<script type="text/javascript">
//页面加载即触发事件;
$(function ()
//获取到session中的信息;
var obj = window.sessionStorage.getItem("people");
if(obj == null)
//简易验证,无登录则跳回首页;
location.replace("loginin.html");
else
//用户姓名放入页面
$("#spanId").html(obj);
);
</script>
</head>
<body>
登录的用户是-->
<span id="spanId"></span>
</body>
</html>
(3)配置文件
使用的工具包依赖
<dependencies>
<!--spring.context-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>5.2.2.RELEASE</version>
</dependency>
<!-- spring-jdbc -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>5.2.2.RELEASE</version>
</dependency>
<!-- spring-aop -->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-aspects</artifactId>
<version>5.2.2.RELEASE</version>
</dependency>
<!--mybatis-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.4.2</version>
</dependency>
<!--log4j-->
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.17</version>
</dependency>
<!-- 阿里数据源 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.10</version>
</dependency>
<!--spring-mybatis-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis-spring</artifactId>
<version>1.3.1</version>
</dependency>
<!--mysql数据库驱动-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.22</version>
</dependency>
<!--spring.mvc-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>5.2.2.RELEASE</version>
</dependency>
<!--servlet-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
</dependency>
<!--jackson-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.1</version>
</dependency>
</dependencies>
数据库连接需要的参数文件database.properties
driverClassName=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://127.0.0.1:3306/day20211024_study_mybatis_db?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai
user=root
pwd=123456
initialSize = 5
maxActive = 10
日志文件 log4j.properties
log4j.rootLogger = debug,stdout,D
#System out Console
log4j.appender.stdout = org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target = System.out
log4j.appender.stdout.layout = org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern = [%p] %dyyyy-MM-dd HH:mm:ss,SSS %m%n
#System out File
log4j.appender.D = org.apache.log4j.FileAppender
log4j.appender.D = org.apache.log4j.DailyRollingFileAppender
log4j.appender.D.File = E://logs/log.log
log4j.appender.D.Append = true
log4j.appender.D.layout = org.apache.log4j.PatternLayout
log4j.appender.D.layout.ConversionPattern = %dyyyy-MM-dd HH:mm:ss [ %t:%r ] - [ %p ] -[%l] %m%n
数据库连接池以及事务配置文件 spring-dbandtx.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans
https://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx.xsd">
<!--读取数据库属性文件-->
<context:property-placeholder location="classpath:database.properties"/>
<!--创建连接池使用阿里数据源-->
<bean id="druidDataSource" class="com.alibaba.druid.pool.DruidDataSource">
<property name="driverClassName" value="$driverClassName"/>
<property name="url" value="$url"/>
<property name="username" value="$user"/>
<property name="password" value="$pwd"/>
<property name="initialSize" value="$initialSize"/>
<property name="maxActive" value="$maxActive"/>
</bean>
<!--配置事务管理引用数据库连接池-->
<bean id="transactionManager" class="org.springframework.jdbc.d以上是关于Spring MVC 学习笔记 --- [SpringMVC的数据响应(Ajax提交请求后,用JSON格式响应数据)]的主要内容，如果未能解决你的问题，请参考以下文章
Spring MVC学习笔记——WebContentGenerator
Spring MVC学习—ViewSolvsolver视图解析器的详细介绍与使用案例