Ajax验证用户名

最新推荐文章于 2024-05-16 20:37:11 发布

禧哥

最新推荐文章于 2024-05-16 20:37:11 发布

阅读量82

点赞数

分类专栏：笔记文章标签： html ajax java javascript

本文链接：https://blog.csdn.net/xigedd/article/details/116092347

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Ajax验证用户名

文章目录

- Ajax验证用户名

1、思路

编写一个登陆页面，异步匹配登陆信息
页面是主要思路，先从页面开始写起
格式

由两个input和两个span组成。
前后端关系

前端传文本框内容到后端，后端匹配数据返回数据给前端，前端将数据展示在span标签中

2、编写index.jsp

拿标签id $("#name")
转换css格式 $("#nameinfo").css(“color”,“green”)
以标签形式插入文本 $("#nameinfo").html(data)

<%@ 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 a1(){
                $.post({
                    url:"${pageContext.request.contextPath}/a3",
                    data:{"name":$("#name").val()},
                    success(data){
                        if(data==="ok"){
                            $("#nameinfo").css("color","green")
                        }else {
                            $("#nameinfo").css("color","red")
                        }
                        $("#nameinfo").html(data)
                    }

                })
            }
            function a2(){
                $.post({
                    url:"${pageContext.request.contextPath}/a3",
                    data:{"pwd":$("#pwd").val()},
                    success(data){
                        if(data==="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="nameinfo"></span>
</p>
<p>
    密码<input type="text" id="pwd" onblur=a2()>
    <span id="pwdinfo"></span>
</p>

</body>
</html>

3、编写Ajaxcontroller

 @RequestMapping("/a3")
    public String a3(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;
    }

4、结果展示

在这里插入图片描述

禧哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax验证用户名

Ajax验证用户名文章目录Ajax验证用户名1、思路2、编写index.jsp3、编写Ajaxcontroller4、结果展示1、思路编写一个登陆页面，异步匹配登陆信息页面是主要思路，先从页面开始写起格式由两个input和两个span组成。前后端关系前端传文本框内容到后端，后端匹配数据返回数据给前端，前端将数据展示在span标签中2、编写index.jsp拿标签id $("#name")转换css格式 $("#nameinfo").css(“color”,“green”)
复制链接

扫一扫