摘要:<!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,小程序,网页同时使用。继续加油。