Correction status:qualified
Teacher's comments:
第13章 jQuery中的Ajax操作-
时间:2018年1·0月10号 天气:晴
1. 编程1: $.post()实现用户注册(提示,用邮箱或手机,密码进行注册,邮箱或手机必须在表中唯一,如果重复,必须给用户提示。密码必须要进行非空和长度判断。)
前端代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$.post()</title> </head> <body> <h3>用户登陆$.post()</h3> <p> <label for="email">邮箱:</label> <input type="email" id="email"> </p> <p> <label for="password">密码:</label> <input type="password" id="password" > </p> <p> <button>登陆</button> </p> <script src="lib/jQuery.js"></script> <script> $('button').click(function () { if ($('#email').val().length === 0){ $('#email').after('<span style="color: orangered">邮箱不能为空</span>').next().fadeOut(3000); $('#email').focus(); return false; } if ($('#password').val().length === 0){ $('#password').after('<span style="color: orangered">密码不能为空</span>').next().fadeOut(3000); $('#password').focus(); return false; } if ($('#password').val().length <6){ $('#password').after('<span style="color: orangered">密码不少于六位字符</span>').next().fadeOut(3000); $('#password').focus(); return false; } $.post( 'inc/check.php', { email:$('#email').val(), password:$('#password').val(), }, function (data) { // console.log(data); if (data.status === 2){ $('#email') .after('<span style="color: red"></span>') .next() .html(data.message) .fadeOut(3000) .focus(); $('#email').val(""); $('#password').val(""); return false; } if (data.status ===1){ $('button') .after('<span style="color: coral"></span>') .next() .html(data.message) .fadeOut(3000); return false; }else{ $('button') .after('<span style="color: black"></span>') .next() .html(data.message) .fadeOut(3000); return false } }, //响应数据类型 'json' ); }); </script> </body> </html>
后端代码:
本机运行图: