Ajax入门

最新推荐文章于 2025-05-15 17:04:01 发布

笑---

最新推荐文章于 2025-05-15 17:04:01 发布

阅读量230

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/XINGXINGR/article/details/104794565

什么是Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

使用Ajax能做什么

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

使用springboot完成Ajax的一个小案例

创建一个springboot项目并引入thymeleaf依赖

   <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

编写控制类

@Controller
public class controler {

    @RequestMapping("/a1")
    public void index(String name, HttpServletResponse httpServletResponse) throws IOException {
        System.out.println(name+"-----------------------------");
        if(("xxr").equals(name))
        {
            httpServletResponse.getWriter().print("true");
        }else {
            httpServletResponse.getWriter().print("false");
        }
    }
}

编写前端导入jquery ，可以使用在线的CDN ，也可以下载导入

<!DOCTYPE html>
<html lang="en">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

function a1(){
   // console.log($(".www").val(),'------11111111111111---------')
     $.ajax({
            url:" http://localhost:8080/a1",
            data:{"name":$(".www").val()},
            success:function (data) {

           alert(data)

            }
        })}
    </script>
</head>
<body>
一个弹窗：<input type="text" onblur="a1()"class="www" >
</body>
</html>

启动测试类进行测试，发现不用刷新页面也可以进行验证。
在这里插入图片描述