<!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"> /** *$.post()全局函数 *基本语法: $.post(url.data.success,dataType) *参数说明:url:请求的地址:api/user.php?m=login *data:需要发送到服务器的数据,以js对象方式进行包装 *success(data,status,xhl):执行成功的回调函数 *回调函数:data:从服务器返回的数据 *status:当前请求的状态 8xhr:ajax对象 *我们只关心data * dataType:从服务大返回的数据格式 xml,html,script,json,text,_default */ //$('button:first').click(function(){ //alert(1) // //1.提交地址 // var url='api/user.php?m=login' //2 要提交的数据 // var data={ // 'email':$('#email').val(), // 'password':$('#password').val() // } //3 执行回调 // var success =function(res){ // if (res=='1'){ // $('#tips').text('登陆成功 正在跳转') // setTimeout(function(){ // location.href='api/index.php' // },2000) // }else{ // $('#tips').text('邮箱或密码错误 请重新输入') // $('#email').focus() // setTimeout("tips.innerHTML=''",2000) // } // } //4.设軒运回的数据格式 // var dataType='json' //5.调用全局函数$.post() // $.post(url,data,success,dataType) //简化 $.post('api/user.php?m=login', { 'email':$('#email').val(), 'password':$('#password').val() }, function(res){ if (res=='1'){ $('#tips').text('登陆成功 正在跳转') setTimeout(function(){ location.href='api/index.php' },2000) }else{ $('#tips').text('邮箱或密码错误 请重新输入') $('#email').focus() setTimeout("tips.innerHTML=''",2000) } return false }) </script>
点击 "运行实例" 按钮查看在线实例
<?php if ($_GET['m'] == 'login') { if ($_POST['email'] == 'admin@php.cn' && $_POST['password'] == '123456'){ echo '1'; } else { echo '0'; } }
点击 "运行实例" 按钮查看在线实例