![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
jquery把js实现ajax的代码进行封装，从而使得代码更加简洁。jquery实现ajax的函数有以下几个，$.get()、$.getJSON()、$.post()、$.ajax().其中$.ajax()的属性比较多，是前几个底层方法，基本有3个参数，url请求的脚本，data发送服务器的数据，以及成功后的回调函数function。
$.post()实现用户登录验证
首先获取表单的数据，进行非空和长度的验证，然后用$.post() 请求后台脚本验证，同时用字面量的方式发送表单数据到服务器中，如：{ 'email':$('#email').val(), 'password':$('#password').val() } ，后台脚本应返回一个数组，包括验证的状态以及信息结果，jquery判断验证状态，然后进行相应的输出结果。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h3>用户登录$.post()</h3>
<label for="email">邮箱：</label>
<input type="email" id="email">
<p>
<label for="password">密码：</label>
<input type="password" name="" id="password">
</p>
<p><button>提交</button></p>
<script src="../lib/jquery.js"></script>
<script>
//给button添加点击事件
$('button').click(function () {
//email非空验证
if ($('#email').val().length === 0){
//判断当前是否有提示
if($('span').length < 1){
$('#email').after('<span style="color:red"> 邮箱不能为空</span>');
}; console.log($('span'));
$('#email').focus();
return false;
} else if($('#password').val().length === 0 ||$('#password').val().length<6 ){
if($('span').length < 1){
$('#password').after('<span style="color:red"> 密码不能为空且至少6位</span>');
};
$('#password').focus();
return false;
}else{
$('span').remove();
}
//请求后台脚本验证
$.post('inc/check.php', {'email':$('#email').val(),'password':$('#password').val()}, function (data, status,xhr) {
if (data.status === 1){ //验证成功
$('button').after('<span></span>').next().css('color','green').html(' '+data.message).fadeOut(2000);
}else{ //验证失败
$('button').after('<span></span>').next().css('color','red').html(' '+data.message).fade0ut(2000);
}
},'json')
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
利用$.getJSON() 加载下拉列表中的option数据，json数据是二维数组，有对应的外键，方便数据的查询。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
省 <select id="pro"></select>
市 <select id="city"></select>
区 <select id="area"></select>
<script src="../lib/jquery.js"></script>
<script>
$.getJSON('inc/pro.json', function (data,status) {
let option = '<option value="" >选择(省)</option>';
$.each(data, function (i) { //遍历响应数据
option += '<option value="'+data[i]['proId']+'">'+data[i]['proName']+'</option>';
});
//把数据添加到页面中
$('#pro').html(option);
});
// 省的change事件
$('<p></p>').appendTo('body');
$('#pro').change(function (event) {
// console.log($(event.target).val());
$('#pro option[value=""], #area option[value!=""]').remove();//清楚提示
$.getJSON('inc/city.json', function (data) {
let option = '<option value="" >选择(市)</option>';
$.each(data, function (i) { //遍历响应数据
//判断外键是否一致 选出合适数据 $('#pro').val()
if (data[i].proId == $(event.target).val()) {
option += '<option value="'+data[i]['cityId']+'">'+data[i]['cityName']+'</option>';
}
});
$('#city').html(option);
});
let info = $('#pro').find(':selected').text();
$('span').remove();
$('<span></span>').text(info).appendTo('p');
});
//市的change事件
$('#city').change(function () {
//加载数据
$('#city option[value=""]').remove();//移除提示信息
$.getJSON('inc/area.json', function (data) {
let option = '<option value="" >选择(区)</option>';
//遍历数据
$.each(data, function (i) {
//外键筛选
if (data[i].cityId == $('#city').val()){
option += '<option value="'+i+'">'+data[i]['areaName']+'</option>';
}
});
//插入数据
$('#area').html(option);
});
let info = $('select#city :selected').text();
$('span.city, span.area').remove();
$('<span></span>').addClass('city').text(info).appendTo('p');
});
$('#area').change(function(){
$('#area option[value=""]').remove();//移除提示信息
let info = $('#area :selected').text();
$('span.area').remove();
$('<span></span>').addClass('area').text(info).appendTo('p');
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
