摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax</title>
<!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传入的值是否匹配
批改老师：查无此人批改时间：2019-04-01 09:46:58
老师总结：完成的不错。ajax请求接口验证，接口可以对app，小程序，网页同时使用。继续加油。
