Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。

JQuery使用相关

  • 使用在线的CDN
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  • 下载导入
<script

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

Ajax的核心是XMLHttpRequest对象（XHR）。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以一部方式从服务器获取新数据。
通过JQuery Ajax方法，能够使用Http Get和Http Post从远程服务器伤请求文本、HTML、XML或JSON，同时能够把这些外部数据直接载入网页的被选元素中。

1.配置web.xml和springmvc.xml

```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>encodingFilter</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>encodingFilter</filter-name>

        <url-pattern>/*</url-pattern>

    </filter-mapping>

    <session-config>

        <session-timeout>15</session-timeout>

    </session-config>

    <welcome-file-list>

        <welcome-file>login.jsp</welcome-file>

    </welcome-file-list>

</web-app>


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

         http://www.springframework.org/schema/context/spring-context.xsd

         http://www.springframework.org/schema/mvc

         https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!-- 配置SpringMVC -->

    <!-- 1.开启SpringMVC注解驱动 -->

    <mvc:annotation-driven/>

    <!-- 2.静态资源默认servlet配置-->

    <mvc:default-servlet-handler/>

    <!-- 3.配置jsp 显示ViewResolver视图解析器 -->

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">

        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>

        <!-- 前缀 -->

        <property name="prefix" value="/WEB-INF/jsp/"/>

        <!-- 后缀 -->

        <property name="suffix" value=".jsp"/>

    </bean>

    <!-- 4.扫描web相关的bean -->

    <context:component-scan base-package="com.pp.controller"/>

</beans>
  1. 编辑AjaxController
@RestController

public class AjaxController {

    @RequestMapping("/a1")

    public void ajax1(String name, HttpServletResponse response) throws IOException {

        if ("admin".equals(name)) {

            response.getWriter().print("true");

        } else {

            response.getWriter().print("false");

        }

    }

}
  1. 编辑index.js进行测试
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

   <title>$Title$</title>

    <%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>

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

   <script>

  function a1(){

    $.post({

      url:"${pageContext.request.contextPath}/a1",

      data:{'name':$("#txtName").val()},

      success:function (data,status) {

        alert(data);

        alert(status);

      }

    });

  }

</script>

  </head>

<body>

<%--onblur：失去焦点触发事件--%>

用户名:<input type="text" id="txtName" onblur="a1()"/>

</body>

</html>
  1. 创建实体类User
@AllArgsConstructor

@Data

@NoArgsConstructor

public class User {

    private String name;

    private int age;

    private String sex;

}

注册提示效果

需求：输入正确信息显示OK，如果信息不对显示重新输入

  1. 在控制器中添加
@RequestMapping("/a2")

    public String ajax2(String name, String pwd) {

        String msg = "";

        //模拟数据库中存在数据

        if (name != null) {

            if ("admin".equals(name)) {

                msg = "OK";

            } else {

                msg = "用户名输入错误";

            }

        }

        if (pwd != null) {

            if ("123456".equals(pwd)) {

                msg = "OK";

            } else {

                msg = "密码输入有误";

            }

        }

        return msg; //由于@RestController注解，将msg转成json格式返回

    }
  1. 前端显示页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

     <title>ajax</title>

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

     <script>

    function a1(){

        $.post({

            url:"${pageContext.request.contextPath}/a3",

            data:{'name':$("#name").val()},

            success:function (data) {

                if (data.toString()=='OK'){

                    $("#userInfo").css("color","green");

                }else {

                    $("#userInfo").css("color","red");

                }

                $("#userInfo").html(data);

            }

        });

    }

    function a2(){

        $.post({

            url:"${pageContext.request.contextPath}/a3",

            data:{'pwd':$("#pwd").val()},

            success:function (data) {

                if (data.toString()=='OK'){

                    $("#pwdInfo").css("color","green");

                }else {

                    $("#pwdInfo").css("color","red");

                }

                $("#pwdInfo").html(data);

            }

        });

    }

</script>

</head>

<body>

<p>

      用户名:<input type="text" id="name" onblur="a1()"/>

     <span id="userInfo"></span>

</p>

<p>

      密码:<input type="text" id="pwd" onblur="a2()"/>

     <span id="pwdInfo"></span>

</p>

</body>

</html>
  1. 配置tomcat测试！

SpringMVC07——Ajax的更多相关文章

  1. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  2. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  3. 一个粗心的Bug，JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

  4. ABP文档 - Javascript Api - AJAX

    本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...

  5. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  6. 调用AJAX做登陆和注册

    先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...

  7. Ajax 概念 分析 举例

    Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...

  8. ajax

    常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...

  9. 学习笔记之MVC级联及Ajax操作

    由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...

  10. javascript表单的Ajax 提交插件的使用

    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...

随机推荐

  1. ElasticSearch之Node query cache settings

    对于filter查询,ElasticSearch提供了缓存查询结果的特性,当缓存中存在满足查询条件要求的数据时,直接从缓存中提取查询结果. 对于ElasticSearch节点,该节点上的所有shard ...

  2. 开源易课堂操作手册-yiketang

    title: 开源易课堂操作手册 date: 2022-01-05 15:10:43.915 updated: 2023-04-24 10:21:28.476 url: https://www.yby ...

  3. vulnhub - Aragog - writeup

    信息收集 目标开放了80.22端口. root@Lockly temp/tmp » arp-scan -I eth1 -l Interface: eth1, type: EN10MB, MAC: 00 ...

  4. Spring 事务的实现原理

    在执行访问数据库相关的操作中,特别是针对数据的修改操作,由于对于数据的修改可能会出现异常,因此对于整个一组的数据修改实际上都不能算是生效的,在这种情况下,需要使用事务的 "回滚" ...

  5. JavaImprove--Lesson04--LocalDateTime，ZoneId，Instant，DateTimeFormatter

    一.LocalDateTime LocalDateTime是JDK8的新时间特性,它解决了Date类和Calender类的很多不足,如使用不方便,线程不安全,以及获取时间戳只能拿到毫秒而不能拿到纳秒等 ...

  6. 文心一言 VS 讯飞星火 VS chatgpt （61）-- 算法导论6.4 5题

    文心一言 VS 讯飞星火 VS chatgpt (61)-- 算法导论6.4 5题 五.证明:在所有元素都不同的情况下,HEAPSORT 的时间复杂度是 Ω (nlgn). 文心一言: 要证明在所有元 ...

  7. 解析Stream foreach源码

    摘要:串行流比较简单,对于parallelStream,站在它背后的是ForkJoin框架. 本文分享自华为云社区<深入理解Stream之foreach源码解析>,作者:李哥技术 . 前言 ...

  8. 小白必看！JS中循环语句大集合

    摘要:JavaScript中,一共给开发者提供了一下几种循环语句,分别是while循环,do-while循环,for循环,for Each,for-in循环和for-of循环. 本文分享自华为云社区& ...

  9. 拥抱时序数据库，构筑IoT时代下智慧康养数据存储底座

    摘要:在HDZ城市行广州站中,来自华为云华为云数据库创新Lab向宇从时序数据库的技术角度,解读一下华为云时序数据库GaussDB(for Influx)如何应用在智慧健康养老行业. 本文分享自华为云社 ...

  10. MultipartFile与File的一些事

    摘要:某段时间碰到了中转文件的需求,需要使用HttpClient中转一下文件,在实现这个需求的过程中就用得到了MultipartFile与File. 本文分享自华为云社区<MultipartFi ...