![[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 lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>用户登录$.POST</h3>
<p>
<label for="email">邮箱:</label>
<input type="eamil" id="email" name="email">
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" name="password">
</p>
<button type="submit">提交</button>
<script src="jquery.js"></script>
<script>
//1. 编程1： $.post()实现用户注册
//提示，用邮箱或手机,密码进行注册，邮箱或手机必须在表中唯一，
//如果重复，必须给用户提示。密码必须要进行非空和长度判断。
$('button').click(function () {
if ($('#email').val().length === 0) {
//动态添加span
$('#email').after('<span style="color:red"> 邮箱不能为空</span>')
.next().fadeOut(3000);
//设置焦点
$('#email').focus();
return false;
}
if ($('#password').val().length < 6) {
//动态添加span
$('#password').after('<span style="color:red"> 密码长度不能小于6位</span>')
.next().fadeOut(3000);
//设置焦点
$('#password').focus();
return false;
}
$.post(
'check.php',
{
email:$('#email').val(),
password:$('#password').val()
},
// 响应成功
function (data) {
console.log(data);
if (data.status == 1){
$('button')
.after('<span style="color:green"></span>')
.next()
.html(data.message) //填充span内容
.fadeOut(3000);
} else {
$('button')
.after('<span style="color:red"></span>')
.next()
.html(data.message) //填充span内容
.fadeOut(3000);
}
},
//响应数据类型
'json'
)
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<?php
/**
* Created by PhpStorm.
* User: T3rdW
* Date: 2018/9/20
* Time: 18:13:39
*/
//echo json_encode("测试数据");
$email = htmlspecialchars($_POST['email']);
//密码 sha1加密
$password = sha1(htmlspecialchars($_POST['password']));
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php',root,root);
$sql = "SELECT COUNT(*) FROM `user` WHERE `email`=:email AND `password`=:password";
$stmt = $pdo->prepare($sql);
$stmt->execute(['email'=>$email,'password'=>$password]);
if ($stmt->fetchColumn(0)==1) {
$status = 1;
$message = '验证通过';
} else {
$status = 0;
$message = '邮箱或密码错误';
}
echo json_encode(['status'=>$status,'message'=>$message]);点击 "运行实例" 按钮查看在线实例
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>
<script src="jquery.js"></script>
<script>
$(function(){
$.getJSON('1.json',function (data) {
let option = '<option value="">选择省</option>'
$.each(data,function(i){
option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
});
console.log(option);
$('#pro').html(option);
})
$('#pro').change(function(){
$.getJSON('2.json',function(data){
let option = '<option value="">选择市</option>'
$.each(data,function(i){
if ($('#pro').val() == data[i].proId) {
option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
};
});
//console.log($('#pro').val());
$('#city').html(option);
})
})
$('#city').change(function(){
$.getJSON('3.json',function(data){
let option = '<option value="">选择区</option>'
$.each(data,function(i){
if ($('#city').val() == data[i].cityId) {
option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
};
});
//console.log($('#city').val());
$('#area').html(option);
})
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
