Spring MVC——Ajax之登录验证

最新推荐文章于 2021-08-05 15:15:32 发布

J-April

最新推荐文章于 2021-08-05 15:15:32 发布

阅读量295

点赞数

分类专栏： SSM框架文章标签： springmvc

本文链接：https://blog.csdn.net/weixin_47016497/article/details/110074720

版权

SSM框架专栏收录该内容

3 篇文章 0 订阅

订阅专栏

项目目录

在这里插入图片描述

一、配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <!--    配置DispatcherServlet，这个是Springmvc的核心：请求分发器，前端控制器-->
    <!--    DispatcherServlet要绑定springmvc的配置文件-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>

        <load-on-startup>1</load-on-startup>
    </servlet>

    <!--    springmvc中-->
    <!--    /：只匹配所有请求，不会匹配jsp页面-->
    <!--    /*：匹配所有请求，包括jsp页面-->
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>


</web-app>

二、配置Spring MVC资源文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <!--    配置DispatcherServlet，这个是Springmvc的核心：请求分发器，前端控制器-->
    <!--    DispatcherServlet要绑定springmvc的配置文件-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>

        <load-on-startup>1</load-on-startup>
    </servlet>

    <!--    springmvc中-->
    <!--    /：只匹配所有请求，不会匹配jsp页面-->
    <!--    /*：匹配所有请求，包括jsp页面-->
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <filter>
        <filter-name>encoding</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    
</web-app>

三、导入jquery配置文件

通过jquery官方下载相关配置文件后导入项目。

四、编写登录的jsp页面

<%--
  Created by IntelliJ IDEA.
  User: 流浪者
  Date: 2020/11/24
  Time: 11:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax之登录验证</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
    <script>
        // Ajax核心代码
        function a1() {
            $.post({
                url: "${pageContext.request.contextPath}/a3",
                data: {"name": $("#name").val()},
                success: function (data) {
                    if (data === "ok") {
                        $("#userinfo").css("color", "green");
                    } else {
                        $("#userinfo").css("color", "red");
                    }

                    $("#userinfo").html(data);
                    console.log(data);
                }
            })
        }

        function a2() {
            $.post({
                url: "${pageContext.request.contextPath}/a3",
                data: {"pwd": $("#pwd").val()},
                success: function (data) {
                    if (data === "ok") {
                        $("#pwdinfo").css("color", "green");
                    } else {
                        $("#pwdinfo").css("color", "red");
                    }

                    $("#pwdinfo").html(data);
                    console.log(data);
                }
            })
        }
    </script>
</head>
<body>
<%--登录界面--%>
<div class="form-inline">
    <p class="form-group">用户名：<input type="text" id="name" onblur="a1()" class="form-control">
        <span id="userinfo"></span>
    </p>
</div>
<div class="form-inline" style="margin-top: 30px;">
    <p class="form-group">密&nbsp;&nbsp;&nbsp;码：<input type="text" id="pwd" onblur="a2()" class="form-control">
        <span id="pwdinfo"></span>
    </p>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

五、编写Controller类

/*@Author： 流浪者
@Description:
@Time： 2020/11/24 11:19
@Version: 1.0
*/

package com.kuang.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class AjaxController {

    @RequestMapping("/a3")
    public String a3(String name ,String pwd){
        String msg="";
        if (name!=null){
            if ("admin".equals(name)){
                msg="ok";
            }else{
                msg="用户名错误";
            }
        }

        if (pwd!=null){
            if ("123".equals(pwd)){
                msg="ok";
            }else{
                msg="密码错误";
            }
        }

        return msg;

    }
}

六、总结

1、项目设计过程出现的问题及解决方案
①项目找不到相关包而出现编译失败
解答：项目开启Tomcat之前需将相关的库文件导入Artifacts
在这里插入图片描述
②如图所示

解答：
i 使用较高的jquery包版本；
ii Spring可能未处理静态资源文件，在applicationContext.xml中添加如下代码

<mvc:default-servlet-handler />

J-April

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Spring MVC——Ajax之登录验证

项目目录一、配置web.xml<?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xml
复制链接

扫一扫