<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<form >
用户名： <input type="text" class="name" name="name" >
密码： <input type="text" class="pwd" name="pwd" >
<br>
<span id="ti" style="color: red"></span>
<br>
<input id="sub" type="submit" onclick="ck();return false;" value="提交">
</form>
</body>
</html>
<script type="text/javascript">
let sub=document.querySelector("#sub");
let ti=document.querySelector("#ti");
function ck() {
let formData =new FormData();
let uname=document.querySelector(".name");
let pwd=document.querySelector(".pwd");
formData.append('name',uname.value);
formData.append('pwd',pwd.value);
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
let flag=xmlHttp.responseText;
if(flag==0){
ti.innerText='登录失败，用户名或密码错误';
}else{
ti.innerText='登录成功';
}
}
};
xmlHttp.open("post", "ck.php");
xmlHttp.send(formData);
}
</script>php页面
if($_POST){
$data=['name'=>'admin','pwd'=>'123456'];
$name=$_POST['name'];
$pwd=$_POST['pwd'];
if($name!=$data['name'] || $pwd!=$data['pwd']){
echo 0;
}else{
echo 1;
}
}效果图：
和之前邮箱验证差不多，也是判断post传入的值是否匹配
