ajax登录验证的原理,ajax用户登录验证-get和post提交方式，与工作原理—2018-8-15...

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有异步和同步，异步是指：当用户做了很多的操作，而不是等到服务器返回数据后在进行操作下一步。同步的话：当用户操作了这一件事，没等到服务器返回的请求不能进行下一步的操作！

如果我的思路不对，请老师点一下！谢谢