Collection
Collection
Ajax的工作原理是异步请求的过程。***端和服务器可以分别同时处理不同的请求。***端通过设置时间的监听来进行判断服务器是否处理完成返回***端所需要的文件。
以下是我的代码
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax实战:表单验证</title>
</head>
<body>
<h3>用户登录</h3>
<form>
<div>邮箱: <input type="email" name="email"></div>
<div>密码: <input type="password" name="password"></div>
<!--修改按钮本身的提交类型,变成普通的按钮因为使用Ajax提交-->
<div><button type="button">提交</button></div>
</form>
<script>
let btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
//1.创建xhr对象
let xhr = new XMLHttpRequest();
//2.监听响应状态
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) { // 准备就绪
// 判断响应结果:
if (xhr.status === 200) {
// 响应成功,通过xhr对象的responseText属性可以获取响应的文本,此时是html文档内容
let div = document.createElement('div'); //创建新元素放返回的内容
div.style.color = 'red';
let json = JSON.parse(xhr.responseText);//从服务器端接收回来的数据转为js对象
if (json.status === 1) {//等于1表示登录成功
div.innerHTML = json.msg;//插入动态信息是否登录成功
} else if (json.status == 0) {
div.innerHTML = json.msg;
}
// 将响应文本添加到新元素上
document.forms[0].appendChild(div); // 将新元素插入到当前页面中
btn.disabled = true;//把按钮禁用掉防止重复验证
setTimeout(function(){//设定定时器
document.forms[0].removeChild(div);
btn.disabled = false;//启用按钮
if (json.status == 1) {
location.href = 'index.html';//验证成功进行跳转
}
},3000);//毫秒计算.3000=3秒
} else {
// 响应失败,并根据响应码判断失败原因
alert('响应失败'+xhr.status);
}
} else {
'正在请求请稍等....';
}
}
//3.设置请求参数
xhr.open('post','./2018-9-13.php',true);
//4. 设置头信息,将内容类型设置为表单提交方式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//4.发送请求
let data = { //提取到用户填写的邮箱和密码组成数组
email: document.getElementsByName('email')[0].value,
password: document.getElementsByName('password')[0].value
};
//将js的数组转换为json的字符串从而发送给服务器
let data_json=JSON.stringify(data);
//在json字符串前面添加一个键值使得发送的时候是个键值对的数组
xhr.send('data='+data_json);
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
以下是php端的验证代码
<?php
$user = json_decode($_POST['data']);
//echo $user->email;
$email = $user->email;
$password = sha1($user->password);
$pdo = new PDO('mysql:host=localhost;dbname=php','root','root');
$sql = "SELECT COUNT(*) FROM `user` WHERE `email`='{$email}' AND `password`='{$password}' ";
$stmt = $pdo->prepare($sql);
$stmt->execute();
if ($stmt->fetchColumn(0) == 1) {
echo json_encode(['status'=>1,'msg'=>'登录成功,正在跳转...']) ;
exit;
} else {
echo json_encode(['status'=>0,'msg'=>'邮箱或密码错误,登录失败!']) ;
exit;
}点击 "运行实例" 按钮查看在线实例
以下是我的手抄代码主要是以get为例子的
