Idea中SpringMVC使用Ajax+JdbcTemplate类实现动态检测用户名是否可用

这个应该是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>

8.部署Tomcat服务器，即可实现…