Correction status:qualified
Teacher's comments:
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <meta charset="UTF-8"> <title>ajax案例</title> <style type="text/css"> .login{ width: 300px; height: 300px; background-color: azure; box-shadow: 10px 10px 5px #ececec; border-radius: 20%; /*margin: 20px;*/ } form{margin: 50px;} #raset,#btn{margin:10px;border:none ;background-color: coral;width: 60px;height: 30px;border-radius:20% ;color: white;} #raset:hover{background-color: cornflowerblue;cursor: pointer;font-size: 1.05em;} #btn:hover{background-color: cornflowerblue;cursor: pointer;font-size: 1.05em;} #btn{margin-left: 36px;} </style> </head> <body> <div class="login"> <h1>LOGIN</h1> <form action="api/user.php" method="post"> <p>账户:<input type="text" name="name" id="name" value="" placeholder="请输入账户名" /></p> <p>密码:<input type="password" name="pwd" id="pwd" value="" placeholder="请输入账户密码" /></p> <p><input type="button" id="btn" value="登陆"/><input type="reset" name="raset" id="raset" value="重置" /></p> </form> <span id="tips"></span> </div> </body> </html> <script type="text/javascript"> $(function(){ //获取按钮添加点击事件 $('#btn').on('click',function(){ // 获取表单提交的数据 var data = { //name和pwd都是表单name属性的值 val()是表单传递的值 'name':$('#name').val(), 'pwd':$('#pwd').val() } //提交的url地址 var url = 'api/user.php?m=login' //回调函数 var success = function(res){ if (res == 1) { //获取到空文本区域输入文本 $('#tips').text('登陆成功,正在跳转中...') //设置定时器跳转到指定页面 setTimeout(function(){ location.href = 'api/index.php' },2000) } else{ //获取到空文本区域输入文本 $('#tips').text('登陆失败,请重新输入...') //设置定时器 setTimeout(function(){ //获取焦点 $('#name').focus() //设置定时器获取文本内容并清空 setTimeout($('#tips').empty(),2000) },2000) } } //声明数据类型 默认为json 也最常用,可以不声明 var datatype = 'json' //.post(url,data,success,datatype)四个参数分别为提交地址,提交的数据,回调函数,数据类型 $.post(url,data,success,datatype) }) }) </script>
点击 "运行实例" 按钮查看在线实例
<?php if ($_GET['m'] == 'login') { if ($_POST['name'] == '123456@qq.cn' && $_POST['pwd'] == '123456'){ echo '1'; } else { echo '0'; } }
点击 "运行实例" 按钮查看在线实例