使用原生AJAX完成登录页面验证异步交互效果,写得简单一点,我希望能让刚学习的人看得明白
时间: 2024-06-12 11:04:34 浏览: 10
首先,在HTML中定义一个form表单,包含一个用户名和密码的输入框和一个提交按钮,如下所示:
```
<form>
<label>用户名:</label>
<input type="text" id="username"><br><br>
<label>密码:</label>
<input type="password" id="password"><br><br>
<input type="button" value="登录" onclick="login()">
</form>
```
其中,输入框的id分别为“username”和“password”,按钮的onclick事件调用了名为“login”的函数。
接下来,我们需要编写这个“login”函数。首先,获取输入框中的用户名和密码:
```
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// ...
}
```
接着,创建一个XMLHttpRequest对象,使用POST方式向服务器发送请求:
```
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://example.com/login", true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// ...
}
};
xhr.send("username=" + username + "&password=" + password);
}
```
在发送请求之前,我们需要设置请求头的Content-Type属性,告诉服务器我们发送的数据格式是表单格式。同时,我们还需要设置一个回调函数,当服务器返回响应时会自动调用这个函数。
在回调函数中,我们可以判断服务器返回的状态码是否为200,如果是,说明登录成功,否则登录失败。我们可以在页面上显示一个提示信息,告诉用户登录结果:
```
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://example.com/login", true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var response = xhr.responseText;
if (response === "success") {
alert("登录成功!");
} else {
alert("登录失败,请检查用户名和密码!");
}
}
};
xhr.send("username=" + username + "&password=" + password);
}
```
在服务器端,我们需要接收并验证用户提交的用户名和密码,然后返回一个字符串,表示登录结果。例如,使用PHP语言实现如下所示:
```
<?php
$username = $_POST["username"];
$password = $_POST["password"];
if ($username === "admin" && $password === "123456") {
echo "success";
} else {
echo "fail";
}
?>
```
这样,我们就完成了一个简单的登录页面验证异步交互效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)