OnClick =“javascript:document.form1.submit()”提交表单给servlet并调用doPost()方法

本文详细解析了在JavaScript中实现删除会员功能时遇到的问题及解决方法。通过使用confirm()对话框进行确认,再利用表单的doPost()方法更新数据库,确保操作前后的流程正确无误。特别强调了在取消删除时避免误执行的关键return语句。

1.首先说说我遇到的问题:做毕设时,需要删除会员,我的想法是:点击删除按钮,通过js 的confirm()提示并作出选择。想通过doPost()方法将表单中的值传入servlet。那应该怎样做呢?(提示:关键语句:document.form1.submit())
2.思路:点击删除---->弹出确认框---->确认---->调用表单---->通过表单的doPost()方法重写数据库
3.具体做法如图:
(1)、表单在这里插入图片描述
(2)、js在这里插入图片描述
4.遇到的问题:
点击取消时也执行删除,这是因为缺少了两处return语句,关键看上图的箭头处(表单中我用的是submit,据说button也行,但我没试成功)
(1)、return false;
(2)、return judge();

<!--js代码  -->
		<script type="text/javascript">
			function judge()
			{
				var message=confirm("确定删除该会员吗?");
				if(message==true)
				{
					 document.form1.submit();
				}
				else
				{ 
					 window.location.href="servlet/MemberServlet";
					 return false;
			     }
			}

<!-- 表单-->
<form action="servlet/MemberServlet" method="post" name="form1">
				<input type="submit" name="member" value="删除会员"  style="border:none;background:none;cursor:pointer;" "this.style.backgroundColor='red';"  "this.style.backgroundColor='white';"  "return judge()">
				<input type="hidden" name="m_cid" value="<%=m.getM_cid() %>">
</form>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>xx市地理可视化系统</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> <style> body { background-color: #f5f5f5; font-family: 'KaiTi', '楷体', serif; } .login-box { width: 400px; margin: 100px auto; padding: 30px; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .title { text-align: center; margin-bottom: 25px; color: #3498db; font-weight: bold; font-size: 24px; } .captcha-box { display: flex; align-items: center; margin: 15px 0; } .captcha { font-size: 18px; letter-spacing: 3px; color: #e74c3c; font-weight: bold; margin-left: 10px; user-select: none; } </style> </head> <body> <div class="login-box"> <div class="title">恩施市地理可视化系统</div> <form id="loginForm"> <div class="mb-3"> <label for="username" class="form-label">用户名</label> <input type="text" class="form-control" id="username" required> <div class="invalid-feedback">用户名不能为纯数字</div> </div> <div class="mb-3"> <label for="password" class="form-label">密码</label> <input type="password" class="form-control" id="password" required> <div class="invalid-feedback">密码长度至少4位</div> </div> <div class="captcha-box"> <input type="text" class="form-control" id="captchaInput" placeholder="输入验证码" required> <div class="captcha" id="captcha"></div> </div> <div class="d-grid gap-2 mt-4"> <button type="submit" class="btn btn-primary"><i class="bi bi-box-arrow-in-right"></i> 登录</button> <button type="button" class="btn btn-outline-secondary" onclick="window.location.href='registration.html'"><i class="bi bi-person-plus"></i> 注册</button> </div> </form> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script> // 生成验证码 function generateCaptcha() { const chars = '0123456789ABCDEFGHJKLMNPQRSTUVWXYZ'; let captcha = ''; for (let i = 0; i < 5; i++) { captcha += chars.charAt(Math.floor(Math.random() * chars.length)); } document.getElementById('captcha').textContent = captcha; return captcha; } let currentCaptcha = generateCaptcha(); document.getElementById('loginForm').addEventListener('submit', function(e) { e.preventDefault(); // 获取表单数据 const username = document.getElementById('username').value; const password = document.getElementById('password').value; const captchaInput = document.getElementById('captchaInput').value; // 验证用户名不能为纯数字 if (/^\d+$/.test(username)) { alert('用户名不能为纯数字'); return; } // 验证密码长度至少6位 if (password.length < 4) { alert('密码长度至少4位'); return; } // 验证验证码 if (captchaInput !== document.getElementById('captcha').textContent) { alert('验证码错误'); return; } // 显示加载动画 const submitBtn = document.querySelector('button[type="submit"]'); const originalBtnText = submitBtn.innerHTML; submitBtn.disabled = true; submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 登录中...'; // 发送登录请求到json-server fetch('http://localhost:3000/users?username=' + username + '&password=' + password) .then(response => response.json()) .then(data => { if (data.length > 0) { // 登录成功,跳转到主页面传递用户名 window.location.href = 'main.html?username=' + encodeURIComponent(username); } else { alert('用户名或密码错误'); submitBtn.disabled = false; submitBtn.innerHTML = originalBtnText; } }) .catch(error => { console.error('Error:', error); alert('登录失败,请稍后重试'); submitBtn.disabled = false; submitBtn.innerHTML = originalBtnText; }); }); </script> </body> </html>为什么注册请求成功后不能成功跳转回login.html
06-05
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

r i c k

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值