<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax入门</title> </head> <body> <!--<h2>Ajax</h2>--> <form action ="api/check.php" method="post"> <fieldset> <legend>用户登录</legend> <p> <lable for="email">邮箱:</lable> <input type="text" name=""email" id="email"> </p> <p> <lable for="password">密码:</lable> <input type="password" name="password" id="password"> </p> <p><button>登录</button> <span id="tips" style="font-size:1.2em;font-weight:bolder;color:red;"></span> </p> </fieldset> </form> </body> </html> <!--<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>--> <script type="text/javascript"> var btn=document.getElementsByTagName('button')[0] btn.onclick=function(){ //alert('登录成功') //获取用户提交的数据 var email=document.getElementById('email').value var password=document.getElementById('password').value //将用户数据拼装成查询字符串 var data='email='+email+'&password='+password //1创建 XHR对象 var xhr =new XMLHttpRequest() //2.事件监听 xhr.onreadystatechange=function(){ if (xhr.readyState == 4 && xhr.status == 200){ var tips =document.getElementById('tips') if(xhr.responseText =='1'){ tips.innerHTML='登录成功,正在跳转。。' setTimeout(function(){ location.href='api/index.php'},2000) }else{ tips.innerHTML='邮箱或密码错误码。。。' document.getElementById('email').focus() //setTimeout(function(){location.href='api/index.php'},2000)} setTimeout("tips.innerHtml=''",2000) } } } //3 建立连接 xhr.open('POST','api/user.php?m=login',true) //4 发送请求 xhr.setRequestHeader('content-type','application/x-www-form-urlencoded') xhr.send(data) //5 设置回调函数 //DOM操作 return false } </script>
点击 "运行实例" 按钮查看在线实例
<?php if ($_GET['m'] == 'login') { if ($_POST['email'] == 'admin@php.cn' && $_POST['password'] == '123456'){ echo '1'; } else { echo '0'; } }
点击 "运行实例" 按钮查看在线实例