0919作业
编程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" name="email"></p> <p><label for="password">邮箱:</label><input type="password" id="password" name="password"></p> <p><button>提交</button></p> <script src="../0917/lib/jquery.js"></script> <script> $('button').click(function(){ if ($('#email').val().length === 0) { $('#email') .after('<span style="color:red">邮箱不能为空</span>') .next() .fadeOut(2000); $('#email').focus(); return false; } 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; } //$.post到服务器上去验证请求的脚本 $.post( 'inc/check.php', // 处理post请求的php脚本 // 要发送到服务器上的数据 // 查询字符串形式的数据 // 'email='+$('#email').val()+'&password='+$('#password').val(), // 对象字面量形式,最终也会转为查询字符串 { email: $('#email').val(), password: $('#password').val() }, // 请求成功的回调 function(data,status,xhr) { // console.log(data,status,xhr); // 查看返回的数据 // 实际开发过程中,大多只用到data,status和xhr极少使用,另外,data和status也可用xhr对象获取 console.log($(this)); // console.log(data.message); if (data.status === 1) { $('button') // 选择当前按钮 .after('<span style="color: green"></span>') // 在按钮后添加一个<span>用来显示提示信息 .next() // 切换到button的下一个兄弟元素,这时就是刚刚添加的<span> .html(data.message) // 设置<span>中的文本内容 .fadeOut(2000); // 将<span>的内容2秒后淡出 } else { $('button') .after('<span style="color: red"></span>') .next() .html(data.message) .fadeOut(2000); } }, // 返回的数据类型 'json' ); }) </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2. 编程: 用ajax实现省/市/县三联下拉框联动查询功能,可使用json完成。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业:三级联动菜单</title> </head> <body> 省 <select name="" id="pro"></select> 市 <select name="" id="city"></select> 区 <select name="" id="area"></select> <p id="addr"></p> <script src="../0917/lib/jquery.js"></script> <script> $(function(){ $.getJSON('inc/1.json',function(data){ let option = '<option value="">选择(省)</option>'; $.each(data,function(i){ option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>'; }); $('#pro').html(option); }); $('#pro').change(function(){ //查看当前选择中元素内容 console.log($(this).find(':selected').text()); $('#addr').html($('#pro').find(':selected').text()); $.getJSON('inc/2.json',function(data){ let option = '<option value="">选择(市)</option>'; $.each(data,function(i){ if (data[i].proId == $('#pro').val()) { option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>'; } }); $('#city').html(option); }); }); $('#city').change(function(){ //查看当前选择中元素内容 console.log($(this).find(':selected').text()); $('#addr').html($('#pro').find(':selected').text()+"---"+$('#city').find(':selected').text()); $.getJSON('inc/3.json',function(data){ let option = '<option value="">选择(县区)</option>'; $.each(data,function(i){ if (data[i].cityId == $('#city').val()) { option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>'; } }); $('#area').html(option); }); }); $('#area').change(function(){ //查看当前选择中元素内容 console.log($(this).find(':selected').text()); $('#addr').html($('#pro').find(':selected').text()+"---"+$('#city').find(':selected').text()+"---"+$('#area').find(':selected').text()); }); }) </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例