SpringMVC学习（6）——Ajax研究

最新推荐文章于 2024-09-17 14:30:35 发布

Duing_

最新推荐文章于 2024-09-17 14:30:35 发布

阅读量179

点赞数

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

本文链接：https://blog.csdn.net/J_Du_pro/article/details/108108819

版权

SpringMVC 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

概念

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
例如：
传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页；但是使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新，而不需要刷新整个页面
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面

jQuery.ajax

Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据
jQuery 提供多个与 AJAX 有关的方法
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中
jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用
我们来个简单的测试，使用最原始的HttpServletResponse处理，最简单，最通用

配置web.xml 和 springmvc的配置文件，复制上面案例的即可【记得静态资源过滤和注解驱动配置上】

<?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">

   <!-- 自动扫描指定的包，下面所有注解类交给IOC容器管理 -->
   <context:component-scan base-package="site.duing.controller"/>
   <mvc:default-servlet-handler />
   <mvc:annotation-driven />

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

编写一个AjaxController

@RestController
public class AjaxController {

    @RequestMapping("/t1")
    public String test(){
        return "hello";
    }

    @RequestMapping("/a1")
    public void a1(String name, HttpServletResponse response) throws IOException {
        System.out.println("a1:param>"+name);
        if ("aaa".equals(name)) {
            response.getWriter().print("true");
        }else {
            response.getWriter().print("false");
        }
    }
}

导入jquery

<script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>

编写index.jsp测试

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>AJAX</title>

    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
    <script>
      function a(){
        $.ajax({
          url:"${pageContext.request.contextPath}/a1",
          data:{"name":$("#username").val()},
          success:function (data){
            alert(data);
          }
        })
      }
    </script>
  </head>
  <body>
    <%--失去一个焦点的时候，发起一个请求到后台--%>
    用户名：<input id="username" onblur="a()" type="text">
  </body>
</html>

启动tomcat测试！打开浏览器的控制台，当我们鼠标离开输入框的时候，可以看到发出了一个ajax的请求！是后台返回给我们的结果！测试成功！

在这里插入图片描述

注册提示效果

写一个Controller

@RestController
public class LoginConctroller {

    @RequestMapping("/test1")
    public String test1(String username){
        if("admin".equals(username)){
            return "ok";
        }else {
            return "fail";
        }
    }

    @RequestMapping("/test2")
    public String test2(String pwd){
        if("123456".equals(pwd)){
            return "ok";
        }else {
            return "fail";
        }
    }
}

前端页面 login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>login</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
    <script>
        function fun1(){
            $.ajax({
                url:"${pageContext.request.contextPath}/test1",
                data:{"username":$("#username").val()},
                success:function (data){
                    if("ok"===data){
                        $("#usernameInfo").css("color","green");
                    }else {
                        $("#usernameInfo").css("color","red");
                    }
                    $("#usernameInfo").html(data);
                }
            })
        }
        function fun2(){
            $.ajax({
                url:"${pageContext.request.contextPath}/test2",
                data:{"pwd":$("#pwd").val()},
                success:function (data){
                    if("ok"===data){
                        $("#pwdInfo").css("color","green");
                    }else {
                        $("#pwdInfo").css("color","red");
                    }
                    $("#pwdInfo").html(data);
                }
            })
        }
    </script>
</head>
<body>
    <div>
        用户名：<input id="username" type="text" onblur="fun1()">
        <span id="usernameInfo"></span>
        <br><br>
        密码：<input id="pwd" type="text" onblur="fun2()">
        <span id="pwdInfo"></span>
    </div>
</body>
</html>