Ajax详解

最新推荐文章于 2022-05-14 21:50:42 发布

冷丁_

最新推荐文章于 2022-05-14 21:50:42 发布

阅读量3.2k

点赞数 2

分类专栏： SpringMVC精华详解 Java后端学习精华文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/qq_41359998/article/details/122806174

版权

Java后端学习精华同时被 2 个专栏收录

95 篇文章 5 订阅

订阅专栏

SpringMVC精华详解

27 篇文章 0 订阅

订阅专栏

Ajax详解

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

利用Ajax可以做

注册时，输入用户名自动检测用户是否已经存在。
登陆时，提示用户名密码错误
删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除
…

jQuery

jQuery 提供多个与 A JAX 有关的方法。
通过 jQuery A JAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。
jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！

去jQuery官网下载，点击Download
在这里插入图片描述

下载后将文件放入工程中即可使用

我们做一个简单的demo
applicationContext.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">

    <!--    自动扫描指定的包，下面所有注解类交给IOC容器管理-->
    <context:component-scan base-package="com.lding.controller"></context:component-scan>
<!--  静态资源过滤  -->
    <mvc:default-servlet-handler></mvc:default-servlet-handler>
    <mvc:annotation-driven></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>

demo1 利用ajax可以在不刷新页面的情况下，在局部异步加载页面
test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe测试体验页面无刷新</title>
    <script>
      function go(){
        var url=document.getElementById("url").value;
        document.getElementById("iframe1").src=url;
      }
    </script>
</head>
<body>
<div>
    <p>请输入地址：</p>
    <p>
        <input type="text" id="url" value="">
        <input type="button" value="提交" onclick="go()">
    </p>
</div>

<div>
    <iframe id="iframe1" style="width: 100%;height: 500px"></iframe>
</div>
</body>
</html>

在这里插入图片描述

demo2，判断前段输入的用户名是否正确，如果用户名匹配则提示true，否则提示为false。
在这里插入图片描述
前段input text输入框失去焦点时提交信息
Controller.java

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

index.jsp


<%--
  Created by IntelliJ IDEA.
  User: apple
  Date: 2022/2/6
  Time: 9:51 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <script>
      function a(){
        $.post({
          url:"${pageContext.request.contextPath}/a1",
          data:{"name":$("#username").val()},
          success:function (data){
            alert(data);
          }
        })
      }
    </script>
  </head>
  <body>
<%--  失去焦点时，发起一个请求（携带信息）到后台--%>
  用户名：<input type="text" id="username" onblur="a()">
  </body>
</html>

在这里插入图片描述

如果对您有帮助，免费的赞点一个～～～感谢🙏

冷丁_

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Ajax详解

Ajax详解Ajax = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。使用Ajax，
复制链接

扫一扫