使用表单实现目录 要求点击登录之后将数据发送到localhost:3000/login接口,并得到登陆成功的提示、
时间: 2024-03-21 21:41:47 浏览: 16
好的,我可以为您提供一些实现目录并发送表单数据的基本代码,但是需要您自己完成登陆接口的编写和登录成功提示的实现。
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录表单</title>
</head>
<body>
<h2>登录</h2>
<form id="loginForm" action="http://localhost:3000/login" method="POST">
<div>
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
</div>
<div>
<input type="submit" value="登录">
</div>
</form>
</body>
</html>
```
上面的代码定义了一个包含用户名和密码输入框的登录表单,并将表单的 action 属性设置为 `http://localhost:3000/login`,即登录接口的地址。表单的 method 属性设置为 POST,表示使用 POST 方法提交表单数据。
JavaScript 代码:
```
const loginForm = document.getElementById("loginForm");
loginForm.addEventListener("submit", (event) => {
event.preventDefault(); // 阻止表单默认提交行为
const formData = new FormData(loginForm); // 构造表单数据
fetch(loginForm.action, {
method: loginForm.method,
body: formData
})
.then((response) => {
if (response.ok) {
// 登录成功
// 在这里实现登录成功提示的代码
} else {
// 登录失败
// 在这里实现登录失败提示的代码
}
})
.catch((error) => {
console.error(error);
});
});
```
上面的代码使用了 fetch API 发送表单数据,并在收到响应后根据响应状态判断登录是否成功。如果登录成功,则可以在 `if (response.ok)` 分支中实现登录成功提示的代码;如果登录失败,则可以在 `else` 分支中实现登录失败提示的代码。同时,为了阻止表单的默认提交行为,需要在表单的 submit 事件处理函数中调用 `event.preventDefault()` 方法。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)