![[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
1、编程1： $.post()实现用户注册
提示，用邮箱或手机,密码进行注册，邮箱或手机必须在表中唯一，如果重复，必须给用户提示。密码必须要进行非空和长度判断。
<!DOCTYPE html>
<html>
<head>
<title>Ajax Register</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<Script src="../0917/lib/jquery.js"></Script>
</head>
<body>
<h3>Register</h3>
<div>
<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>submit</button></p>
</div>
<script>
$('button').on('click',function(){
if(0===$('#email').val().length){
//alert('Email is null.');
$('#email').after($('<span style="color:red">Email is null.</span>').fadeOut(2000));
$('#email').focus();
return false;
}
if(0===$('#password').val().length){
$('#password').after($('<span style="color:red">password is null.</span>').fadeOut(2000));
$('#password').focus();
return false;
}
if($('#password').val().length<3){
$('#password').after($('<span style="color:red">The length of password is samller than 6.</span>').fadeOut(2000));
$('#password').focus();
return false;
}
console.log($('#email').val());
console.log($('#password').val());
$.post('inc/check.php',
{
email: $('#email').val(),
password: $('#password').val()
}
,function(data,status,xhr){
console.log($(this));
if(data.status===1){
$('button')
.after('<span style="color:green"></span>')
.next()
.html(data.msg).fadeOut(2000);
}
if(data.status===0){
$('button')
.after('<span style="color:red"></span>')
.next()
.html(data.msg).fadeOut(2000);
}
},'json');
});
//POST method
$url='inc/check.php';
//$data="{email:"+$('#email').val()+",password:"+$('#password').val()+"}";
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2. 编程: 用ajax实现省/市/县三联下拉框联动查询功能，可使用json完成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three:Province City Area</title>
<Script src="../0917/lib/jquery.js"></Script>
</head>
<body>
Province <select name="" id="Province"></select>
City <select name="" id="City"></select>
Area <select name="" id="Area"></select>
<p id="addr"></p>
<script>
let address = '';
$(function () {
$.getJSON('inc/1.json', function (data) {
let option = '<option value="">Choose Province</option>';
$.each(data, function (i) {
option += '<option value=' + data[i].proId + '>' + data[i].proName + '</option>';
});
$('#Province').html(option);
});
$('#Province').change(function () {
console.log($(this).find(':selected').text());
$.getJSON('inc/2.json', function (data) {
let option = '<option value="">Choose City</option>';
$.each(data, function (i) {
if ($('#Province').val() == data[i].proId) {
option += '<option value=' + data[i].cityId + '>' + data[i].cityName + '</option>';
}
});
$('#City').html(option);
address = '<span>' + $('#Province').find(':selected').text() + '</span>';
$('#addr').append(address);
});
});
$('#City').change(function () {
console.log($(this).find(':selected').text());
$.getJSON('inc/3.json', function (data) {
let option = '<option value="">Choose Area</option>';
$.each(data, function (i) {
if ($('#City').val() == data[i].cityId) {
option += '<option value=' + data[i].areaId + '>' + data[i].areaName + '</option>';
}
});
$('#Area').html(option);
address = '<span>' + $('#City').find(':selected').text() + '</span>';
$('#addr').append(address);
});
});
$('#Area').change(function () {
address = '<span>' + $('#Area').find(':selected').text() + '</span>';
$('#addr').append(address);
});
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例