在使用spring security登录失败后，如何使用jquery显示自定义错误消息？_Jquery_Ajax_Security_Login_Spring Boot

在使用spring security登录失败后，如何使用jquery显示自定义错误消息？

jquery ajax security login spring-boot

在使用spring security登录失败后，如何使用jquery显示自定义错误消息？,jquery,ajax,security,login,spring-boot,Jquery,Ajax,Security,Login,Spring Boot,我用spring security和我的自定义身份验证提供程序配置了这个登录页面，当凭据无效时，它将引发异常这是登录页面： <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"/> <title>Holiday System</title> <link

我用spring security和我的自定义身份验证提供程序配置了这个登录页面，当凭据无效时，它将引发异常

这是登录页面：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>Holiday System</title>
    <link rel="stylesheet" type="text/css" href="css/login.css"/>
</head>
<body class="pagebackgroung">
<div align="center">
    <form action="/login" method="post"  id="cloud" align="center" >
            <input class="input" placeholder="email@neverfailgroup.com"  name="username" type="text"/>
        <br/>
        <br/>
            <input name="password" placeholder="password" type="password" class="input" />
        <br/>
        <br/>
        <br/>
        <button class="submit" type="submit"  style="">Login</button>
        <br/>
        <div id="errorMessage" style="color:red; display: none">
            Invalid Credentials, please try again.
        </div>
    </form>
</div>
</body>

<script type="text/javascript" src="../static/js/login.js"></script>
</html>

这是安全配置（如果有帮助）：

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
@Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private DatabaseAuthenticationProvider authenticationProvider;


    @Override
    public void configure(WebSecurity web) throws Exception {

        web.ignoring().antMatchers("/js/**", "/css/**", "/img/**");
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.formLogin().loginPage("/login").failureUrl("/login").defaultSuccessUrl("/")
                .and().logout().logoutSuccessUrl("/login")
                .and().authorizeRequests().antMatchers("/login").permitAll().anyRequest()
                .authenticated().and().csrf().disable();
    }

    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {

        auth.authenticationProvider(authenticationProvider).eraseCredentials(false);
    }
}

那么，当发生无效登录时，如何在登录页面中显示该错误消息呢

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
@Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private DatabaseAuthenticationProvider authenticationProvider;


    @Override
    public void configure(WebSecurity web) throws Exception {

        web.ignoring().antMatchers("/js/**", "/css/**", "/img/**");
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.formLogin().loginPage("/login").failureUrl("/login").defaultSuccessUrl("/")
                .and().logout().logoutSuccessUrl("/login")
                .and().authorizeRequests().antMatchers("/login").permitAll().anyRequest()
                .authenticated().and().csrf().disable();
    }

    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {

        auth.authenticationProvider(authenticationProvider).eraseCredentials(false);
    }
}