ajax实现前后端分离，并利用异步登录实现检测登录账号详情和实时删除刷新

最新推荐文章于 2022-10-12 21:36:39 发布

不败的我

最新推荐文章于 2022-10-12 21:36:39 发布

阅读量632

点赞数 2

文章标签： jquery javascript ajax java

本文链接：https://blog.csdn.net/weixin_45165921/article/details/109965132

版权

这里自己写了个登陆页面，并利用ajax实现前后端分离，在用户写好账号后，异步登陆提交，在当前页面返回信息。登陆后在这里写个用户详情，删除时给予警告，可以实时显示删除，不用刷新网页。

话不多说，直接上代码

前端页面代码(由于是测试，两个功能模块并不能直接跳转，需要手动输入url，后面会做提示）

1.login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <script src="login.js"></script>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <div>
        <label>login</label>
        <form  id="form" action="/ocp/index">
            <input id="empno" type="text" name="empno" onblur="check()"><br>
            <div id="s"></div>
            <input id="emppsd" type="password" name="emppsd"><br>
            <p id="show"></p>
        </form>
        <button onclick="submit()">login</button>
    </div>
    <div id="1"></div>
</body>
</html>

2.login.js

function submit() {
    let data={empno: document.getElementById("empno").value,
              emppsd: document.getElementById("emppsd").value};
    $.ajax(
        {
            type: "post",
            url: "/ocp/login",
            data: data,
            //接收的数据格式
            dataType:"json",
            success: function (datas) {
                //alert(datas.info)
                //console.log(datas.object.empno)
                if(datas.object == null) {
                    var div=document.getElementById("show");
                    div.innerHTML = datas.info + "<br>";
                    div.setAttribute("style","color:red");
                }
                else{
                    document.getElementById("form").submit();
                }
            },
            error: function () {
                alert("errer")
            }

        }
    )
}
function check() {
    var key=document.getElementById("empno").v

最低0.47元/天解锁文章

不败的我

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
ajax实现前后端分离，并利用异步登录实现检测登录账号详情和实时删除刷新

这里自己写了个登陆页面，并利用ajax实现前后端分离，在用户写好账号，异步登陆提交，在当前页面返回信息。登陆后在这里写个用户详情，删除时给予警告，可以实时显示删除，不用刷新网页。话不多说，直接上代码前端页面代码(由于是测试，两个功能模块并不能直接跳转，需要手动输入url，后面会做提示）1.login.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l
复制链接

扫一扫