window.confirm()方法实现跳转到不同界面

如何实现JavaScript的window.confirm()方法,实现点击“是”,跳转到“login.jsp”,点击“否”,跳转到“index.jsp”?

在用户点击确定或取消后,会返回一个布尔值作为结果。‘

正确代码演示:

if (window.confirm("你想跳转到登录页面吗?")) {
  window.location.href = "login.jsp";
} else {
  window.location.href = "index.jsp";
}

有伙伴问:为什么 <c:redirect url="login.jsp"></c:redirect>  不可以?

因为这就涉及到Jsp页面加载顺序:

1、<%......%>优先加载
2、jsp页面中的html元素(图片/视频等置后加载)与js代码按照从上到下依次加载
3、window.ready或者$(document).ready(function(){...}),简写$(funciton(){...}),是文档结构加载完之后加载执行,但不包括图片等非文字媒体文件
4、加载图片等页面元素
5、window.onload是页面上包括图片等元素都加载完之后进行加载执行

简说:   java是在服务器端运行的代码,jsp在服务器的servlet里运行,而javascript和html都是在浏览器端运行的代码。

所以加载执行顺序是是 java>jsp>js。

所以写了这个c标签的重定向就不会出现弹框而会直接跳转

错误代码演示

  if (window.confirm('注册成功,是否去登录')) {
            <c:redirect url="login.jsp"></c:redirect>
        } else {
            <c:redirect url="register.jsp"></c:redirect>
        }

请注意,在使用 window.confirm() 方法时需要注意以下几点:

  • 该方法只能在浏览器环境中使用,在 Node.js 环境中无效。
  • 该方法是同步执行的,会阻塞其他 JavaScript 代码的执行,直到用户完成确认操作。
  • 由于浏览器实现的差异,window.confirm() 方法的外观和行为可能会有所不同,因此建议在不同浏览器中测试。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是微信小程序登录注册并跳转到主页界面的代码详细实现: 1. 在 app.json 文件中配置主页路径和页面列表 ```json { "pages": [ "pages/index/index", "pages/login/login", "pages/register/register" ], "window": { "navigationBarTitleText": "微信小程序登录注册示例" }, "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" } ] } } ``` 2. 在登录界面 login.js 中实现登录逻辑 ```javascript Page({ data: { username: '', password: '' }, handleUsernameInput(e) { this.setData({ username: e.detail.value }) }, handlePasswordInput(e) { this.setData({ password: e.detail.value }) }, handleLogin() { // 判断用户名和密码是否为空 if (this.data.username.trim() === '' || this.data.password.trim() === '') { wx.showToast({ title: '用户名和密码不能为空', icon: 'none' }) return } // 发送登录请求 wx.request({ url: 'http://localhost:3000/login', method: 'POST', data: { username: this.data.username, password: this.data.password }, success: res => { // 登录成功,保存用户信息到本地存储 wx.setStorageSync('userInfo', res.data) // 跳转到主页 wx.switchTab({ url: '/pages/index/index' }) }, fail: err => { wx.showToast({ title: '登录失败,请检查用户名和密码', icon: 'none' }) } }) } }) ``` 3. 在注册界面 register.js 中实现注册逻辑 ```javascript Page({ data: { username: '', password: '', confirmPassword: '' }, handleUsernameInput(e) { this.setData({ username: e.detail.value }) }, handlePasswordInput(e) { this.setData({ password: e.detail.value }) }, handleConfirmPasswordInput(e) { this.setData({ confirmPassword: e.detail.value }) }, handleRegister() { // 判断用户名和密码是否为空 if (this.data.username.trim() === '' || this.data.password.trim() === '') { wx.showToast({ title: '用户名和密码不能为空', icon: 'none' }) return } // 判断两次输入的密码是否一致 if (this.data.password !== this.data.confirmPassword) { wx.showToast({ title: '两次输入的密码不一致', icon: 'none' }) return } // 发送注册请求 wx.request({ url: 'http://localhost:3000/register', method: 'POST', data: { username: this.data.username, password: this.data.password }, success: res => { // 注册成功,保存用户信息到本地存储 wx.setStorageSync('userInfo', res.data) // 跳转到主页 wx.switchTab({ url: '/pages/index/index' }) }, fail: err => { wx.showToast({ title: '注册失败,请检查用户名和密码', icon: 'none' }) } }) } }) ``` 4. 在主页界面 index.js 中实现获取用户信息和退出登录逻辑 ```javascript Page({ data: { userInfo: null }, onLoad() { // 获取用户信息 const userInfo = wx.getStorageSync('userInfo') if (userInfo) { this.setData({ userInfo }) } }, handleLogout() { // 清空本地存储的用户信息 wx.clearStorageSync('userInfo') // 跳转到登录界面 wx.redirectTo({ url: '/pages/login/login' }) } }) ``` 5. 在主页界面 index.wxml 中实现展示用户信息和退出登录按钮 ```html <view class="container"> <view wx:if="{{userInfo}}" class="user-info"> <image src="{{userInfo.avatarUrl}}" class="avatar"></image> <view class="nickname">{{userInfo.nickName}}</view> </view> <view wx:else class="login-tip">请先登录</view> <button wx:if="{{userInfo}}" class="logout-btn" bindtap="handleLogout">退出登录</button> </view> ``` 6. 在 app.js 中配置全局请求头和登录态检查 ```javascript App({ onLaunch() { // 设置全局请求头 wx.request.defaults.header = { 'Content-Type': 'application/json' } // 检查登录态 const userInfo = wx.getStorageSync('userInfo') if (!userInfo) { wx.redirectTo({ url: '/pages/login/login' }) } } }) ``` 通过以上步骤,我们就实现了微信小程序登录注册并跳转到主页界面的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值