<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%--<html>--%> <%--<head>--%> <%-- <title>Title</title>--%> <%--</head>--%> <%--<body>--%> <%--<div>--%> <%-- <div style="color: #37ff00">${requestScope.msg}</div>--%> <%-- 用户名:<input type="text" name="username" > <br>--%> <%-- 密 码:<input type="password" name="password" > <br>--%> <form action="/userlogin" method="post"> <%-- <input type="submit" value="登录">--%> <%-- </form>--%> <%-- </div>--%> <%--</body>--%> <%--</html>--%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册表单</title> <style> .container { width: 300px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; } .form-group { margin-bottom: 10px; } .form-group label { display: block; margin-bottom: 5px; } .form-group input { width: 100%; padding: 5px; } .form-group button { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } </style> </head> <body> <div class="container"> <h2>登录</h2> <form id="login-form"> <div class="form-group"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> </div> <div class="form-group"> <label for="password">密码:</label> <input type="password" id="password" name="password" required> </div> <div class="form-group"> <button type="submit">登录</button> </div> </form> </div> <script> document.getElementById('login-form').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单提交的默认行为 var username = d帮我让这个代码把账号密码发给LoginServlet进行逻辑判断
时间: 2023-08-14 16:08:00 浏览: 145
要实现将账号密码发送给LoginServlet进行逻辑判断,你可以修改JavaScript部分的代码。在事件处理函数中,你可以使用AJAX技术将表单数据发送到LoginServlet,并接收返回的结果进行处理。
请将以下代码替换掉原来的JavaScript部分:
```javascript
document.getElementById('login-form').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单提交的默认行为
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求方法和URL
xhr.open('POST', '/userlogin', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 设置请求完成后的回调函数
xhr.onload = function() {
if (xhr.status === 200) {
// 请求成功,根据返回的结果进行处理
if (xhr.responseText === 'success') {
window.location.href = '/sss.jsp'; // 验证成功,跳转到sss.jsp
} else {
window.location.href = '/zz.jsp'; // 验证失败,跳转到zz.jsp
}
}
};
// 发送请求
xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password));
});
```
在这段代码中,我们首先获取了用户名和密码的值。然后,创建了一个XMLHttpRequest对象,并设置请求方法为POST,URL为"/userlogin"。我们还设置了请求头的Content-Type为"application/x-www-form-urlencoded",这是一种常用的表单数据编码格式。
接下来,我们定义了一个回调函数xhr.onload,该函数会在请求完成后被调用。在该函数中,我们首先判断请求是否成功(状态码为200),然后根据返回的结果进行处理。如果返回的结果为"success",则跳转到sss.jsp,否则跳转到zz.jsp。
最后,通过调用xhr.send()方法将表单数据发送到LoginServlet。需要注意的是,我们使用encodeURIComponent()方法对用户名和密码进行编码,以确保特殊字符的正确传输。
这样,当用户点击登录按钮时,表单数据会被发送到LoginServlet进行逻辑判断,并根据结果进行页面跳转。
阅读全文