作业：编程1： $.post()实现用户注册
代码块实现的功能：对电话号的验证及从server取得数据的处理
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现用户注册</title>
<script src="../lib/jquery.js"></script>
</head>
<body>
<h3>用户注册</h3>
<div>
<label for="username">用户名：</label>
<input type="text" name="username" value="" id="username" placeholder="请填写手机号码！">
</div>
<div>
<label for="password">密码：</label>
<input type="password" name="password" value="" id="password" placeholder="不少于6位">
</div>
<div>
<button value="注册">注册</button>
<!-- <button value="重置">重置</button>-->
</div>
<script>
$('button').click(function () { //不太会写，先提供一个思路：拿到文本框的值，先判断是字符串还是数字，然后字符串进行邮箱验证，数字进行手机验证：tostring.call();
//手机号码验证 （仅一种验证）写成一个函数更好
/* let phoneReg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/; 手机号码正则 */
/* let emailReg = /\w+[@]{1}\w+[.]\w+/; 邮箱正则 */
let phone = $("#username").val();
let phoneReg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
if(phone ==''){
$('#username').after('<span style="color: red;" >请填写手机号码！</span>').next().fadeOut(3000);
$('#username').focus();
return false;
}else if (phone.length != 11){
$('#username').after('<span style="color: red;" >手机号码位数不正确！</span>').next().fadeOut(3000);
$('#username').focus();
return false;
}else if (!phoneReg.test(phone)){
$('#username').after('<span style="color: red;" >请填写正确的手机号码！</span>').next().fadeOut(3000);
$('#username').focus();
return false;
}/*else if (checkPhoneIsExist()){ 想对号码是否已被使用验证，但是考虑到密码的验证，就一起发动到PHP，让PHP处理把
}*/
//密码非空验证
if($('#password').val() ==''){
$('#password').after('<span style="color: red;" >请填写密码！</span>').next().fadeOut(3000);
$('#password').focus();
return false;
} else if ($('#password').val().length < 6) {
$('#password').after('<span style="color: red;" >密码长度不够！</span>').next().fadeOut(3000);
$('#password').focus();
return false;
}
//将文本框获得用户信息，返回到服务器进行验证
//$.post(url[,data][,callback][,dataType])
$.post(
'check.php',
{
username: $('#username').val(),
password: $('#password').val()
},
function (data) {
if (data.status == 0){
$('button').after('<span style="color:red;"></span>').next().html(data.message).fadeOut(3000);
}else if (data.status == 1){
$('button').after('<span style="color:green;"></span>').next().html(data.message).fadeOut(3000);
}else if (data.status == 2){
$('button').after('<span style="color:yellow;"></span>').next().html(data.message).fadeOut(3000);
}
},
'json'
);
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
代码2：check.php
对页面获得数据进行验证，并执行，返回执行结果
<?php
/**
* 接收传来的电话号码 密码，和数据表中验证，返回一个状态字
*/
//接受数据
$username = $_POST['username'];
$password = $_POST['password'];
//建立数据库的连接
$pdo = new PDO ('mysql:host=localhost;dbname=stu','root','root');
$sql = "SELECT COUNT(*) FROM `user` WHERE `email=:username`";
$stmt = $pdo->prepare($sql);
$stmt->execute(['username'=>$username]);
if ($stmt->fetchColumn(0) == 1){
$status = 0;
$message = '手机已存在，请登录！';
}else {
$insert = "INSERT INTO `user` (`email`,`password`) VALUE (:username,:password)";
$stmt1 = $pdo->prepare($insert);
$flag = $stmt1->execute(['username'=>$username,'password'=>$password]); //有可能会插入失败，所有要捕获错误
if ($flag){
$status = 1;
$message ="注册成功，跳转中……";
}else{
$status = 2;
$message ="errors，请稍后再试！";
}
}
echo json_encode(['status'=>$status,'message'=>$message]);
作业2，实现省市区的三级菜单联动
实例
<!doctype html>
<html lang="zh_cn">
<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>菜单联动的实现</title>
<script src="../lib/jquery.js"></script>
</head>
<body>
省：<select name="" id="pro"></select>
市：<select name="" id="city"></select>
区县：<select name="" id="area"></select>
<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>';
});
$('#pro').html(option);
});
$('#pro').change(function () {
$.getJSON('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 () {
$.getJSON('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);
});
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
