这个应该是Ajax异步刷新很经典的例子了
1.目录结构
2.配置Web.xml文件
<!--配置前端控制器-->
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-mvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
3.配置spring-mvc.xml文件
这里需要注意,一定要进行mvc:resources的配置,如果你的这个标签变红了,在排除jar包冲突以后还是会变红,那么可能是你的spring-mvc.xml文件的头部写少了。
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
<!--开启扫描包-->
<context:component-scan base-package="com.Controller"/>
<!--配置视图解析器-->
<bean id="internalResourceViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/pages/"></property>
<property name="suffix" value=".jsp"></property>
</bean>
<!--告诉前端控制器,不要拦截静态资源-->
<mvc:resources mapping="/js/**" location="/js/"/>
<!--开启mvc注解支持-->
<mvc:annotation-driven/>
</beans>
4.配置Account的持久层
由于我还没有进行SSM的整合,所以现在使用JdbcTemplate类来进行数据库的操作,不要喷我啊,整完SSM,立马更新这篇博客。
package com.DaoImpl;
import com.Dao.Dao.AccountDao;
import com.Entity.Account;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import java.util.List;
public class AccountDaoImpl implements AccountDao {
private JdbcTemplate jdbcTemplate;
public JdbcTemplate getJdbcTemplate() {
return jdbcTemplate;
}
public void setJdbcTemplate(JdbcTemplate jdbcTemplate) {
this.jdbcTemplate = jdbcTemplate;
}
@Override
public List<Account> findByName(String name) {
List<Account> list=jdbcTemplate.query("select * from account where name=?",new BeanPropertyRowMapper<Account>(Account.class),name);
return list;
}
}
5.配置application.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"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
<!--配置账户的持久层-->
<bean id="accountDaoImpl" class="com.DaoImpl.AccountDaoImpl">
<property name="jdbcTemplate" ref="jdbcTemplate"></property>
</bean>
<bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
<property name="dataSource" ref="dataSource"></property>
</bean>
<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<property name="driverClassName" value="com.mysql.jdbc.Driver"></property>
<property name="url" value="jdbc:mysql://localhost:3306/movie"></property>
<property name="username" value="root"></property>
<property name="password" value="123"></property>
</bean>
</beans>
6.控制器中:com.Controller.AccountController
@RequestMapping(path = "/checkAccountname")
@ResponseBody
public String checkAccountname(String accountname)
{
BeanFactory factory=new ClassPathXmlApplicationContext("application.xml");
AccountDao accountDao=factory.getBean("accountDaoImpl", AccountDao.class);
List<Account> list=accountDao.findByName(accountname);
if(list.isEmpty())
{
return "true";
}
else
{
return "false";
}
}
7.index.jsp
这里是用Jquery的$("#name").blur()事件进行异步控制的
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function(){
//动态检测用户名
$("#name").blur(function () {
$.post("account/checkAccountname",{accountname:$("#name").val()},function (data) {
if(data=="true")
{
$("#name_msg").html("账户可用");
}
else
{
$("#name_msg").html("账户已存在");
}
})
})
})
</script>
</head>
<body>
<!--动态检测用户名-->
<form action="account/addAccount" method="post">
账户名:<input type="text" name="name" id="name" placeholder="不可多于6个字符"/><span id="name_msg"></span><br/>
密码:<input type="password" name="pwd" id="pwd" placeholder="字母与数字混合使用"/><span id="pwd_msg"></span><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>