SpringMVC学习(6)——Ajax研究

概念

  • 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处理,最简单,最通用

  1. 配置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>
  1. 编写一个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");
        }
    }
}
  1. 导入jquery
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
  1. 编写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>
  1. 启动tomcat测试!打开浏览器的控制台,当我们鼠标离开输入框的时候,可以看到发出了一个ajax的请求!是后台返回给我们的结果!测试成功!
    在这里插入图片描述

在这里插入图片描述

注册提示效果

  1. 写一个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";
        }
    }
}
  1. 前端页面 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>

【记得处理json乱码问题】

  1. 测试一下效果,每次输入完成都会动态请求响应,局部刷新
    在这里插入图片描述

0 条评论

发表评论

Avatar placeholder

您的电子邮箱地址不会被公开。