Ajax~实现登录验证和异步数据加载

最新推荐文章于 2024-04-14 10:18:53 发布

Listen-Y

最新推荐文章于 2024-04-14 10:18:53 发布

阅读量858

点赞数 3

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

本文链接：https://blog.csdn.net/Shangxingya/article/details/109552001

版权

SpringMVC 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

文章目录

Ajax简介

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
传统的网页(即不用ajax技术的网页)，想要更新内容或者提交一个表单，都需要重新加载整个网页。
使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。
使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
使用时配置web.xml 和 springmvc的配置文件【记得静态资源过滤和注解驱动配置上】

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

导入jquery

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

jQuery.ajax(…)
部分参数：
url：请求地址
type：请求方式，GET、POST（1.9.0之后用method）
headers：请求头
data：要发送的数据
contentType：即将发送信息至服务器的内容编码类型(默认: “application/x-www-form-urlencoded; charset=UTF-8”)
async：是否异步
timeout：设置请求超时时间（毫秒）
beforeSend：发送请求前执行的函数(全局)
complete：完成之后执行的回调函数(全局)
success：成功之后执行的回调函数(全局)
error：失败之后执行的回调函数(全局)

用途

利用AJAX可以做：

注册时，输入用户名自动检测用户是否已经存在。

登陆时，提示用户名密码错误

删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。

异步数据加载到页面

…等等

实现登录验证

我们写一个Controller

    @RequestMapping("t4")
    public String test4(String username, String password) {
        System.out.println("username" + username + "password" + password + "================");
        String msg = "";
        if (username != null) {
            if ("admin".equals(username)) {
                msg = "OK";
            } else {
                msg = "用户名有误";
            }
        }
        if (password != null) {
            if ("aaa".equals(password)) {
                msg = "OK";
            } else {
                msg = "密码有误";
            }
        }
        return msg;
    }

前端页面 login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <script>

        function a1(){
            $.ajax({
                url:"${pageContext.request.contextPath}/t4",
                data:{'username':$("#name").val()},
                success:function (data) {
                    if (data.toString()==='OK'){
                        $("#userInfo").css("color","green");
                    }else {
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data);
                }
            });
        }
        function a2(){
            $.ajax({
                url:"${pageContext.request.contextPath}/t4",
                data:{'password':$("#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>

异步数据加载

实体类user

@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {

    private int id;
    private String name;
    private String password;
}

我们来获取一个集合对象，展示到前端页面

    //注意我用的是RestController返回的是json字符串
    @RequestMapping("/t3")
    public List<User> test3() {
        List<User> list = new ArrayList<>();
        list.add(new User(0, "listen", "112233"));
        list.add(new User(1, "bike", "445566"));
        list.add(new User(2, "milk", "778899"));
        return list;
    }

前端页面

<%--
  Created by IntelliJ IDEA.
  User: Huawei
  Date: 2020/11/7
  Time: 19:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>异步加载数据</title>

    <%--导包--%>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>

    <%--实现--%>
    <script>

        /*只要点击按钮就执行方法*/
        $(function () {
            $("#button").click(function () {
                $.ajax({
                    url:"${pageContext.request.contextPath}/t3",
                    success: function (date) {
                        let html = "";
                        for (let i = 0; i <date.length; i++) {
                            html += "<tr>" +
                                "<td>" + date[i].id + "</td>" +
                                "<td>" + date[i].name + "</td>" +
                                "<td>" + date[i].password + "</td>"
                                + "<\tr>"
                        }
                        $("#body").html(html);
                    }
                })

            })
        })

    </script>

</head>
<body>


<input type="button" id="button" value="加载数据">
<table style="width: 80%">
    <thead>
    <th>编号</th>
    <th>名字</th>
    <th>密码</th>
    </thead>
    <tbody id="body">

    </tbody>
</table>

</body>
</html>

Listen-Y

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Ajax~实现登录验证和异步数据加载

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

扫一扫