ajax用户登录验证：
实例
html>
Ajax实战:表单验证用户登录
邮箱:
密码:
提交
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) {
let p = document.createElement('p'); //创建新元素放返回的内容
p.style.color = 'red';
// 将服务器端返回的json字符串转为js对象
let json = JSON.parse(xhr.responseText);
// 如果json.statu == 1 表示查询成功
if (json.statu === 1) {
p.innerHTML = json.msg;
} else if (json.statu == 0) {
p.innerHTML = json.msg;
}
// 将响应文本添加到新元素上
document.forms[0].appendChild(p);
// 把点击过的按钮禁用掉
btn.disabled = true;
// 定时器，把提示的信息2秒后消失
setTimeout(function(){
// 将提示信息删除
document.forms[0].removeChild(p);
// 启动按钮
btn.disabled = false;
if (json.statu == 1) {
// 跳转
location.href = 'admin.php';
}
},2000);
} else {
// 响应失败,并根据响应码判断失败原因
alert('响应失败'+xhr.status);
}
} else {
// http请求仍在继续,这里可以显示一个一直转来转去的图片
}
}
//3.设置请求参数
xhr.open('post','inc/demo.php',true);
//4. 设置头信息,将内容类型设置为表单提交方式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
let data = {
email:document.getElementsByName('email')[0].value,
password:document.getElementsByName('password')[0].value
};
// 将js对象转为json字符串
let data_json=JSON.stringify(data);
//4.发送请求
xhr.send('data='+data_json);
}
运行实例 »
点击 "运行实例" 按钮查看在线实例
inc/demo.php处理数据文件：
实例
// 将json字符串转为php对象
$user = json_decode($_POST['data']);
$email = $user->email;
$password = $user->password;
// 数据库验证用户
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');
// 满足条件的记录数
$sql = "SELECT COUNT(*) FROM `lianxi` WHERE `email`='{$email}' AND `password`='{$password}'";
// 预处理对象
$stmt = $pdo->prepare($sql);
// 执行语句
$stmt->execute();
//判断记录数是否存在
if($stmt->fetchColumn(0) == 1){
echo json_encode(['statu'=>1,'msg'=>'登录成功，正在跳转...']);
exit;
}else{
echo json_encode(['statu'=>0,'msg'=>'邮箱或密码错误，请重新输入...']);
exit;
}
运行实例 »
点击 "运行实例" 按钮查看在线实例
ajax提交get和post方式：
get方式：
实例
html>
get方式邮箱：
密码：
提交
let bth = document.getElementsByName('button')[0];
bth.onclick = function () {
let email = document.getElementsByName('email')[0].value;
let password = document.getElementsByName('password')[0].value;
let xhr = new XMLHttpRequest();
// email和password是input控件的name值
let url = 'inc/demo1.php?email='+email+'&password='+password;
//第一个参数是以什么方式发送 第二个发送的url 第三个是否异步默认true(异步)
xhr.open('get',url,true);
xhr.send(null);
//当状态码为4的时候为请求处理完成，返回结果
xhr.onreadystatechange = function () {
if(xhr.readyState === 4){
console.log(xhr.responseText); //xhr.responseText接收返回的数据
}
}
}
运行实例 »
点击 "运行实例" 按钮查看在线实例
post方式：
实例
html>
post方式邮箱：
密码：
提交
let bth = document.getElementsByName('button')[0];
bth.onclick = function () {
let email = document.getElementsByName('email')[0].value;
let password = document.getElementsByName('password')[0].value;
let xhr = new XMLHttpRequest();
// email和password是input控件的name值
let url = 'inc/demo1.php?email='+email+'&password='+password;
//第一个参数是以什么方式发送 第二个发送的url 第三个是否异步默认true(异步)
xhr.open('post',url,true);
// post方式要设置请求头信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send('email='+email+'&password='+password);
//当状态码为4的时候为请求处理完成，返回结果
xhr.onreadystatechange = function () {
if(xhr.readyState === 4){
console.log(xhr.responseText); //xhr.responseText接收返回的数据
}
}
}
运行实例 »
点击 "运行实例" 按钮查看在线实例
inc/demo1.php处理数据提交文件：
实例
//编码
header("Content-type: text/html; charset=utf-8");
// get获取数据
$a = $_GET['email'];
$b = $_GET['password'];
// post获取数据
$a = $_POST['email'];
$b = $_POST['password'];
echo '邮箱：'.$a.'密码：'.$b;
运行实例 »
点击 "运行实例" 按钮查看在线实例
ajax工作原理：
当用户提交数据后，页面不会发生跳转，保持当前的页面，但是数据已经提交到服务器，当服务器处理用户提交的数据后，然后返回前端也就是用户点击提交数据的界面。前端看起来并没有发生什么，但是数据已经发生了改变。
比如说用户登录时提交了登录的表单，而这些数据急速的请求到服务器中，等服务器接收处理后便返回了前端，很明显的给用户提示，提升用户体验。
ajax有异步和同步，异步是指：当用户做了很多的操作，而不是等到服务器返回数据后在进行操作下一步。同步的话：当用户操作了这一件事，没等到服务器返回的请求不能进行下一步的操作！
如果我的思路不对，请老师点一下！谢谢
也要重写hashCode())
