jQuery用ajax验证登录帐号密码

最新推荐文章于 2021-10-20 22:11:23 发布

船长ζ

最新推荐文章于 2021-10-20 22:11:23 发布

阅读量3.7k

点赞数 1

分类专栏：随记整理一点点

本文链接：https://blog.csdn.net/zyjtoto/article/details/101721587

版权

随记同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

整理一点点

39 篇文章 0 订阅

订阅专栏

后端代码；只返回 json单字符串数据

   @RequestMapping("/a2")
    @ResponseBody
    public String fixLogin(String username,String password) {
        Map<String, Object> map = new HashMap<>();
        String msg="";
        if (username != null) {
            if ("admin".equals(username)) {
                msg="ok";
            }else{
                msg = "用户名不正确";
            }
        }
        if (password != null) {
            if ("123456".equals(password)) {
                msg = "ok";
            } else {
                msg = "密码输入错误";
            }
        }
        return msg;
    }

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证用户输入情况</title>
    <script type="text/javascript" src="/asserts/js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript">
        function io1() {
            $.post("/ajax/a2",{"username":$("#name").val()},function (data) {
                if (data.toString() === 'ok') {
                    $("#nameInfo").css("color","green")
                }else{
                    $("#nameInfo").css("color","red")
                }
                $("#nameInfo").html(data);
            })
        }
        function io2() {
            $.post("/ajax/a2",{"password":$("#pwd").val()},function (data) {
                if (data.toString() === "ok") {
                    $("#pwdInfo").css("color", "green")
                }else{
                    $("#pwdInfo").css("color", "red")
                }
                $("#pwdInfo").html(data);
            })
        }
    </script>
</head>
<body>
<div>
    <p>
       用户名 <input type="text" id="name" onblur="io1()"/>
        <span id="nameInfo"></span>
    </p>
</div>
<div>
    <p>
        用户密码 <input type="text" id="pwd" onblur="io2()"/>
        <spam id="pwdInfo"></spam>
    </p>
</div>
</body>
</html>

结果显示：

在这里插入图片描述

Ajax总结：使用JQuery需要导入jQyery包，
三部曲：
1，编写对应的处理controller类，返回消息或者字符串对象或者json根式数据；
2.编写ajax请求：
1.url：controller的mapping
2.data：key/value键值对
3.success：回调函数，相当于原生的response.onreadystatechange=function(){}
3.给ajax绑定事件，点击时间onclick，失去焦点事件onblur，键盘弹起事件keyup,键盘按下keydown.

2.返回一个列表

 @PostMapping("/a1")
    @ResponseBody
    public List<BookUser> findAll() {
        List<BookUser> list = bookUserMapper.selectAlluser();
        return list;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用ajax请求显示用户列表</title>
    <script type="text/javascript" src="asserts/js/jquery-3.4.1.min.js"></script>
</head>
<body>
<h3>用户信息显示</h3>
<div>
    <p>
        <input type="button" value="获取数据" id="btn">
    </p>
</div>
<div>
    <table style="width: 80%">
        <thead>
            <th>id</th>
            <th>姓名</th>
            <th>性别</th>
            <th>生日</th>
            <th>邮箱</th>
            <th>会员等级</th>
            <th>创建日期</th>
            <th>修改日期</th>
        </thead>
        <tbody id="tb">

        </tbody>
    </table>
</div>
<script>
    function timeStamp2String(time){
        var datetime = new Date();
        datetime.setTime(time);
        var year = datetime.getFullYear();
        var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
        var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
        var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();
        var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
        var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
        return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second;
    }
    function timeStamp1String(time){
        var datetime = new Date();
        datetime.setTime(time);
        var year = datetime.getFullYear();
        var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
        var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
        return year + "-" + month + "-" + date;
    }
  $(function () {
      $("#btn").click(
          function () {
              $.post("/ajax/a1",function (data,status) {
                  console.log(data);
                  var html = "";
                  for (var i = 0; i < data.length; i++) {
                      html += "<tr>"+
                          "<td>"+data[i].id+"</td>"+
                          "<td>"+data[i].username+"</td>"+
                          "<td>"+data[i].sex+"</td>"+
                          "<td>"+timeStamp1String(Date.parse(data[i].birthday))+"</td>"+
                          "<td>"+data[i].email+"</td>"+
                          "<td>"+data[i].userLevel+"</td>"+
                          "<td>"+timeStamp2String(Date.parse(data[i].createTime))+"</td>"+
                          "<td>"+timeStamp2String(Date.parse(data[i].updateTime))+"</td>";
                  }
                  $("#tb").html(html);
              })
          })
  })
</script>
</body>
</html>

结果：点击获取数据后显示，不刷新页面

在这里插入图片描述

船长ζ

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
jQuery用ajax验证登录帐号密码

后端代码；只返回 json单字符串数据 @RequestMapping("/a2") @ResponseBody public String fixLogin(String username,String password) { Map<String, Object> map = new HashMap<>(); Str...
复制链接

扫一扫