前端页面跳转消息弹框不显示的原因

页面跳转问题:如果页面跳转非常迅速,可能在弹框还未完全渲染之前页面就已经跳转了,导致用户看不到弹框。可以尝试在跳转前加入一个短暂的延迟,例如:

f(resp.data==='success'){
    //弹出成功信息框
    that.$message({
        message: '添加成功',
        type: 'success'
    });
    //延时页面跳转,保证信息框成功渲染
    setTimeout(() => {
        window.location.href = "./index.html";
    }, 1000);  // 1秒延迟

}

在本页面中:在本页面弹出对话框,数据添加成功关闭对话框可以成功弹出信息框,因为没有涉及到页面跳转问题,直接在本页面中弹出成功信息框。

下面是一个完整的登录页面示例,包括了前端校验和后端数据比较的逻辑: ```html <!DOCTYPE html> <html> <head> <title>Login</title> <style> form { display: flex; flex-direction: column; align-items: center; margin-top: 50px; } input { margin-bottom: 10px; } button { margin-top: 10px; } .error { color: red; margin-bottom: 10px; } table { margin-top: 50px; border-collapse: collapse; } td, th { padding: 8px; border: 1px solid black; } </style> </head> <body> <form> <label for="userID">User ID:</label> <input type="text" id="userID" name="userID"> <label for="password">Password:</label> <input type="password" id="password" name="password"> <button type="submit">Login</button> <p class="error" id="error"></p> </form> <table id="userTable"></table> <script> const form = document.querySelector('form'); const userIDInput = document.querySelector('#userID'); const passwordInput = document.querySelector('#password'); const errorText = document.querySelector('#error'); const userTable = document.querySelector('#userTable'); form.addEventListener('submit', e => { e.preventDefault(); const userID = userIDInput.value.trim(); const password = passwordInput.value.trim(); if (/^[0-9]+$/.test(userID) && password.length === 6) { // validation passed const xhr = new XMLHttpRequest(); xhr.open('POST', '/login'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = () => { if (xhr.status === 200) { const users = JSON.parse(xhr.response); if (users.length > 0) { // show user table userTable.innerHTML = ` <thead> <tr> <th>User ID</th> <th>Username</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody> ${users.map(user => ` <tr> <td>${user.userID}</td> <td>${user.username}</td> <td>${user.email}</td> <td>${user.phone}</td> </tr> `).join('')} </tbody> `; } else { alert('Login failed.'); window.location.href = '/login.html'; } } else { alert('Request failed.'); } }; xhr.onerror = () => { alert('Request failed.'); }; xhr.send(JSON.stringify({userID, password})); } else { // validation failed errorText.textContent = 'User ID must be all numbers, password must be 6 characters long.'; } }); </script> </body> </html> ``` 解释: - HTML 部分包含了登录表单、错误提示信息的标签,以及用于显示用户信息的表格。 - CSS 部分设置了表单元素的样式、错误提示信息的样式、以及表格的样式。 - JavaScript 部分通过使用 `querySelector` 方法获取表单元素和错误提示信息的引用,以及用于显示用户信息的表格的引用,然后监听表单的提交事件,进行前端校验和后端数据比较。 - 前端校验逻辑:当用户填写的 User ID 只包含数字且 Password 的长度为 6 时,校验通过,否则提示错误信息。 - 后端数据比较逻辑:使用 AJAX 技术向后端发送 POST 请求,携带用户填写的 User ID 和 Password,后端根据这些信息从数据库中查询对应的用户数据,如果存在该用户,则将所有用户数据返回给前端,将用户表格显示出来;否则弹出提示框“登录失败”,并跳转回原来的登录页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值