摘要：<!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='登錄失敗，用戶名或密碼錯(cuò)誤';
}else{
ti.innerText='登錄成功';
}
}
};
xmlHttp.open("post", "ck.php");
xmlHttp.send(formData);
}
</script>php頁(yè)面
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;
}
}效果圖：
和之前郵箱驗(yàn)證差不多，也是判斷post傳入的值是否匹配
批改老師：查無(wú)此人批改時(shí)間：2019-04-01 09:46:58
老師總結(jié)：完成的不錯(cuò)。ajax請(qǐng)求接口驗(yàn)證，接口可以對(duì)app，小程序，網(wǎng)頁(yè)同時(shí)使用。繼續(xù)加油。