关于ajax的简单使用（SpringMVC）

最新推荐文章于 2023-02-01 15:05:12 发布

月亮的-影子

最新推荐文章于 2023-02-01 15:05:12 发布

阅读量130

点赞数

分类专栏： SpringMVC 文章标签： spring

本文链接：https://blog.csdn.net/m0_46388866/article/details/113471983

版权

SpringMVC 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

关于ajax的简单使用

ajax其实原理并不复杂，其实就是一个部分发送请求的过程。那么什么是部分发送请求呢？

其实并不难理解，我们每次点击百度的搜索框的时候，我们可以看一下浏览器network看一下发送的是什么请求，它发送的是xhr请求，这个请求对于ajax来说非常重要，它也是ajax比较重要的一个对象，负责发送请求并且接收返还数据。而这里发送的请求就是一个部分的请求，前端页面并没有刷新，只是数据刷新了而已。也就是说ajax的思想就是由原来发送请求后端接收请求之后就要返回一个前端的页面，主动权在后端的手上，但是现在变化了。部分发送请求，变成了主动权在前端的手上，即使数据没有接收到，也不会影响其他功能的实现。想一下以前我们如果后端没有找到数据是不是就会页面报错，特别影响体验。ajax就是可以很方便提升体验，部分发送请求。

那么下面给出一个简单的登录检验的案例，主要是检验登录的用户名和密码，如果错误就会弹出信息。我们使用的是ajax。

案例步骤：

1.配置好环境spring-mvc和web.xml
2.创建一个简单的表单页面
3.为表单用户名和密码组件的添加上一个焦点事件，如果失去焦点就会发送部分请求取得数据，然后在后面给出提示
4.写Controller接收请求返回数据

可能遇到的问题：
①请求没有发送成功
解决方案，直接访问控制器试试看看是不是控制器的问题，然后再检查前端代码，查看浏览器的请求和回应

代码（springmvc.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:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
        https://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc
        https://www.springframework.org/schema/mvc/spring-mvc.xsd">

<!--    扫描-->
    <context:component-scan base-package="com"/>


<!--    过滤资源-->
    <mvc:default-servlet-handler/>

<!--    视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

    <!--映射器和适配器和json的防止乱码-->

    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>
</beans>

代码（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">
    <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:spring-mvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <filter>
        <filter-name>filter</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>filter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

代码（test.jsp）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function  a1() {
            $.get({
                url:"${pageContext.request.contextPath}/a1",
                data:{username:$("#username").val()},
                success:function (data) {
                    if(data==="ok"){
                        $("#userMsg").css("color","green");
                    }else{
                        $("#userMsg").css("color","red");
                    }
                    $("#userMsg").html(data);
                }
            })
        }

        function a2(){
            $.get({
                url: "${pageContext.request.contextPath}/a1",
                data:{password:$("#password").val()},
                success:function (data) {
                    if(data==="ok"){
                        $("#passMsg").css("color","green");
                    }else{
                        $("#passMsg").css("color","red");
                    }
                    $("#passMsg").html(data);
                }
            })
        }
    </script>
</head>
<body>
<p>
    用户名:<input id="username" type="text" onblur="a1()">
    <span id="userMsg"></span>
</p>
<p>
    密码:<input id="password" type="text" onblur="a2()">
    <span id="passMsg"></span>
</p>



</body>
</html>

代码（控制器）

public class HelloController {
    public HelloController() {
        System.out.println("我创建了");
    }

    @RequestMapping("/a1")
    public String getTest(@Nullable String username, @Nullable String password) {
        if (username != null) {
            if ("admin".equals(username)) {
                return "ok";
            } else {
                return "用户名错误";
            }
        }

        if (password != null) {
            if ("123456".equals(password)) {
                return "ok";
            } else {
                return "密码错误";
            }
        }
        return null;
    }
}

月亮的-影子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于ajax的简单使用（SpringMVC）

关于ajax的简单使用ajax其实原理并不复杂，其实就是一个部分发送请求的过程。那么什么是部分发送请求呢？其实并不难理解，我们每次点击百度的搜索框的时候，我们可以看一下浏览器network看一下发送的是什么请求，它发送的是xhr请求，这个请求对于ajax来说非常重要，它也是ajax比较重要的一个对象，负责发送请求并且接收返还数据。而这里发送的请求就是一个部分的请求，前端页面并没有刷新，只是数据刷新了而已。也就是说ajax的思想就是由原来发送请求后端接收请求之后就要返回一个前端的页面，主动权在后端的手上，
复制链接

扫一扫

专栏目录