2023年7月18日随手记：表单跳转、按钮跳转实现及用户注销

目录

一、表单跳转后地址栏多了问号

二、HTML点击按钮button跳转页面的几种实现方法

 三、实现用户登陆和注销的操作

---

 

一、表单跳转后地址栏多了问号

---

 <h1>登录</h1>
 <br>
    <form>
        昵称：<input type="text" v-model="player.username" @blur="checkName2">
        <br>
        密码：<input type="text" v-model="player.password" @keyup="checkPwd2">
        <br>
        <button :disabled="isLogDisable" @click="login1">登录</button>
        <br><br><br>
        <p>没有账户，请先<a href="#" @click="exchange1">注册</a></p>
   </form>

       原意是想通过表单将账户名和密码传到后台servlet执行，若是账户或密码错误的话，弹窗显示"用户名或密码错误，登录失败！"，但是值确实是传到后台台并没有弹窗显示，但会马上跳转页面到一开始的登录界面，并且在地址栏上多出了一个问号，如    http://localhost:8080/login.html   =>     http://localhost:8080/login.html?。在地址栏多了个问号这个页面，重新登录一遍才能实现页面成功跳转，而且每次重新打开浏览器都会有这个小问题（换个浏览器打开也是一样）。

       后来查资料发现是因为表单有一个跳转的作用而且button也添加了页面跳转的函数，两者有点冲突，于是就将button放到了form的外面,就发现没有跳转到当前页面了。
 

<h1>登录</h1>
<br>
<form>
    昵称：<input type="text" v-model="player.username" @blur="checkName2">
    <br>
    密码：<input type="text" v-model="player.password" @keyup="checkPwd2">
    <br>
</form>
    <button :disabled="isLogDisable" @click="login1">登录</button>
    <br><br><br>
    <p>没有账户，请先<a href="#" @click="exchange1">注册</a></p>

 

二、HTML点击按钮button跳转页面的几种实现方法

方法一：在button标签中加上onclick属性，赋值为Javascript

<input type="button" onclick='location.href=("index.html")' />//在本页面打开
<input type="button" onclick='window.open("newIndex.html")' />//打开新页面

<button class="startGame" onclick="window.location.href='../game/main.html'" >进入游戏</button>       
 //跳转到新页面

方法二：触发一个函数跳转

<script>
    function jump(){
        window.location.href="http://www.baidu.com";
    }
</script>
 <button οnclick="jump()">我是一个按钮</button>

方法三：a标签的超链接可以直接嵌套一个button

<a href="https://www.baidu.com/">
    <button>点我跳转到度娘！</button>
</a>

 方法四：表单的action定向提交跳转

<form action="xx.html" method="post">
    <input type="button" value="按钮">
</form>

 

 三、实现用户登陆和注销的操作

1、定位到注销按钮所在位置，并为其添加链接（跳转到相关servlet程序中的相关方法）与点击事件（提示是否退出操作

<a href="/playerC?action=logOut" >注销</a>

2、在servlet中创建退出方法

public class EmployeeServlet extends BaseServlet {
//注销操作

public void logout(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {

//清除缓存

request.getSession().invalidate();

//页面跳转，注销之后建议使用重定问跳转到登录页面

response.sendRedirect(url);

}

 3、在vue中添加点击事件的具体操作，如下图用v-if，v-else方法显示不同的效果：

<div id="app">
    <p v-if="isLogin">
    <span>欢迎您，尊敬的高端玩家{{login_player.username}}! <a href="/playerC?action=logOut" >注销</a> </span>
        <br><br>
        <button class="startGame" onclick="window.location.href='../game/main.html'" >进入游戏</button>
    </p>
    <p v-else>
        <a href="login.html">登录/注册</a><br><br>
    </p>
</div>