Correction status:Uncorrected
Teacher's comments:
ajax() 方法用于执行 AJAX(异步 HTTP)请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$.ajax()</title> </head> <body> <h3>用户登录$.ajax()</h3> <p><label for="email">邮箱:</label><input type="email" id="email" name="email"></p> <p><label for="password">邮箱:</label><input type="password" id="password" name="password"></p> <p><button id="submit">提交</button></p> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> var email = $('#email'); var password = $('#password'); var btn = $('#submit'); //给btn 按钮添加点击事件 btn.on('click',isEmpty); function isEmpty() { if (email.val().length === 0){ email.after('<span style="color: red;">邮箱不能为空</span>').next().fadeOut(2000); email.focus(); return false; }else if (password.val().length === 0) { password.after('<span style="color: red">密码不能为空</span>').next().fadeOut(2000); password.focus(); return false; }else if (password.val().length < 6) { password.after('<span style="color: red">密码不能少于6位</span>').next().fadeOut(2000); password.focus(); return false; }else{ checkUser1() } } function checkUser() { $.post( //POST请求的php脚本 'inc/check.php', // 要发送到服务器上的数据 // 查询字符串形式的数据 // 'email='+$('#email').val()+'&password='+$('#password').val(), // 对象字面量形式,最终也会转为查询字符串 { email: email.val(), password: password.val() }, //请求成功的回调 function (data) { // console.log(data,status,xhr); // 查看返回的数据 // console.log(data); if (data.status === 1){ $('button').after('<span style="color: green"></span>') .next().html(data.message).fadeOut(2000); }else { $('button') .after('<span style="color: red"></span>') .next() .html(data.message) .fadeOut(2000); } }, 'json' ) } function checkUser1() { // $.ajax 参数的属性大约有20多个, 常用的是以下5个, 必须掌握 $.ajax({ // 1.请求类型 type: 'POST', //2.请求的URL地址 url: 'inc/check.php', // 3.需要发送到服务器上的数据,以对象方式 data: { email:email.val(), password: password.val() }, //请求成功后回调处理 success: function (data) { if (data.status === 1){ $('button').after('<span style="color: green"></span>').next().html(data.message).fadeOut(2000); }else { $('button').after('<span style="color: red"></span>').next().html(data.message).fadeOut(2000); } }, dataType: 'json' }) } </script> </body> </html>
点击 "运行实例" 按钮查看在线实例