二〇二三-三-二十四——验证码、输入框判断、页面跳转

最新推荐文章于 2023-09-09 10:42:31 发布

NameofMacro

最新推荐文章于 2023-09-09 10:42:31 发布

阅读量85

点赞数

文章标签： javascript servlet 前端

本文链接：https://blog.csdn.net/BEHEMOOTH/article/details/129755370

版权

验证码点击切换事件

鼠标移到图片显示文字：
给 img 标签添加一个title属性

点击图片切换图片：jQuery 属性操作 - attr() 方法

<img onclick="changeCode(this)"  src="/code" width="120" height="50" title="点击切换验证码" >
<!-- onclick="window.open()" 方法用于点击打开新页面>

//点击切换验证码
//点击图片传递一个对象
//获得对象重新赋值
//当浏览器访问后台 地址 一致时，浏览器会自动从缓存池获取数据，添加一个额外值保证每次访问的地址不一样
function changeCode(obj) {
    $(obj).attr("src","/code?time="+Date.now())
}

判断输入框数据

通过ajax将数据转到后台
后台对数据逻辑处理，返回一个值给前台

ajax获取后台返回值，判断情况

$.ajax({
    url: "/login",
    data: data,
    type: "post",
    dataType: "json",
    success: function (res) {   //获取后台值，后台值由 servlet /login 返回
        console.log(res);
    }
})

验证码错误时，光标移至验证码输入框

清空输入框

聚焦输入框

if (res.code === -1) {
    layer.msg("验证码错误");
    $('#code').val('') //清空输入框
    $("#code").focus() //聚焦输入框
}

用户名或密码错误聚焦

if (res.code === 0) {
    layer.msg("用户名或密码错误");
    $("#username").focus(); //用户名或密码错误聚焦
}

登录成功跳转主页面

if (res.code === 1) {
    layer.msg("登录成功");
    location.href='index.html'
}

welcome.html 页面获取管理员username

将数据装入 sessionStorage

sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。 ——Window.sessionStorage - Web API 接口参考 | MDN (mozilla.org)

//登录成功时存入
login.js
if (res.code === 1) {
    sessionStorage.setItem("username", data.username);
    layer.msg("登录成功");
    location.href='index.html'
}

//welcome.html 设置id
<span class="x-red" id="loginName">test</span>！当前时间:2018-04-25 20:50:53

//welcome.js获取值
welcome.js
$(function () {
    $("#loginName").html(sessionStorage.getItem("username"))
})

welcome页面动态展示当前时间

设置定时器

两种定时器：

setInterval(getTimeNow, 1000);  //每一秒刷新
setTimeout(getTimeNow, 1000);   //一秒后刷新

每秒刷新当前时间

setInterval(function () {
    let time = new Date()   //获取时间对象
    let nowTime = timestampToTime(time.toLocaleString('en-US', {hour12: false}).split(" "))
    $("#nowTime").html(nowTime)
}, 1000);  //每一秒刷新

function timestampToTime(times) {
    let time = times[1]
    let mdy = times[0]
    mdy = mdy.split('/')
    let month = parseInt(mdy[0]);
    let day = parseInt(mdy[1]);
    let year = parseInt(mdy[2])
    return year + '-' + month + '-' + day + ' ' + time
}

——来源：https://blog.csdn.net/mfxcyh/article/details/126619284

js

js 定义方法

function name(){
    //不需要参数类型
}

对象、json格式转换

JSON.stringify(data.field);// 将对象转化为json
JSON.parse(" 'a':'111', 'b':'aaa' "); // 将json转换为对象

格式不正确时不能强制转换

type为 submit 时，点击会刷新页面

form表单设置属性 οnsubmit=“false”，同时将js中的监听提交时间 return false，可以禁止点击提交按钮刷新页面

<form method="post" class="layui-form" onsubmit="return false">
        <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
</form>

//监听提交
form.on('submit(login)', function(data){
        return false;
});

val、html 赋值的区别：

.val用于给input表单赋值

$("#loginName").val('')     //赋值
let a = $("#loginName").val()   //取值

.html用于给div赋值

$("#name").html(username)  //赋值
let a = $("#name").html()    //取值