1.$.post用户注册实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<script src="lib/jquery.js"></script>
<style>
.box{
width: 450px;
height: auto;
margin: 50px auto;
box-shadow: 8px 8px 8px silver;
padding: 50px;
border: 2px dashed #ccc;
line-height: 40px;
}
label{
width: 100px;
display: inline-block;
}
input{
height:30px;
}
p:last-child{
padding-left: 100px;
}
button{
width: 80px;
height:30px;
margin: 5px 15px;
}
button:hover{
background-color:orangered;
color:white;
}
</style>
<script>
$(function(){
$('#submit').on('click',function () {
let name = $('#name').val();
let email = $('#email').val();
let password = $('#password').val();
let topassword = $('#topassword').val();
// console.log({"name":name,"email":email,"password":password,"topassword":topassword});
if(name.length===0){
alert('用户名不能为空');
$('#name').focus();
return false;
}else if(name.length<6 || password.length<6){
alert('用户名/密码不能少于6位');
$('#name').focus();
return false;
}else if(password.length===0){
alert('密码不能为空');
$('#password').focus();
return false;
}else if(topassword.length===0){
alert('请再次输入密码,进行确认!');
$('#topassword').focus();
return false;
}else if($('#topassword').val() !== $('#password').val()){
alert('两次输入密码不同，请重新输入');
$('#topassword').val('');
$('#password').val('');
$('#password').focus();
return false;
}
$.post('inc/reg.php',{
"name" : $("#name").val(),
"email" : $("#email").val(),
"password" : $("#password").val()
},function (data) {
if(JSON.parse(data).status===1){
$('<span style="color: green">'+JSON.parse(data).message+'3秒后跳转到登陆页</span>').appendTo('div');
setTimeout(function () {
location.href='demo6.html';
},3000);
}else if(JSON.parse(data).status===0){
$('<span style="color: red">'+JSON.parse(data).message+'</span>').appendTo('div');
}
})
});
$('#email').focusout(function(){
if($('#email').val().search('@')<0){
$('#email').after('<span style="color: red">邮箱不能为空,且必须有@符号</span>');
$('#email').focus();
$('#email').next('span').fadeOut(3000);
}else if($('#email').val().search('@')>0){
$.get('inc/check_email.php',{email:$('#email').val()},function (data) {
// console.log(JSON.parse(data).status);
if(JSON.parse(data).status===0){
$('#email').after('<span style="color:red">'+JSON.parse(data).message+'</span>');
$('#email').next('span').fadeOut(3000);
$('#email').focus();
$('#email').val('');
}else if(JSON.parse(data).status===1){
$('#email').after('<span style="color:green">'+JSON.parse(data).message+'</span>');
$('#email').next('span').fadeOut(3000);
$('#password').focus();
}
});
}
});
$('#reset').on('click',function () {
$('*').val('');
$('#name').focus();
return false;
});
});
</script>
</head>
<body>
<div class="box">
<h3>用户注册</h3>
<p>
<label for="name">用户名:</label>
<input type="name" id="name" name="name" placeholder="输入字母或数字">
</p>
<p>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="example@php.cn">
</p>
<p>
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="输入复杂一点哦">
</p>
<p>
<label for="topassword">确认密码:</label>
<input type="password" id="topassword" name="topassword" placeholder="再次输入密码">
</p>
<p>
<button type="submit" id="submit">注册</button>
<button type="reset" id="reset">重置</button>
</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
1.用户注册效果图，当用户输入邮箱后，鼠标焦点离开email时进行非空和@符号验证，都通过了再进行数据是否存在的验证check.php。
reg.php注册页
<?php
if($_POST){
$name = htmlspecialchars(trim($_POST['name']));
$email = htmlspecialchars(trim($_POST['email']));
$password = trim($_POST['password']);
}
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','admin');
$sql = "INSERT IGNORE `user` (`name`,`email`,`password`) VALUE ('{$name}','{$email}',sha1('$password'));";
$stmt = $pdo->prepare($sql);
$stmt->execute();
echo json_encode('<h3>成功添加了'.$stmt->rowCount().'条记录</h3>');
$stat=null;
$pdo=null;运行实例 »
点击 "运行实例" 按钮查看在线实例
check_email.php验证邮箱是否被注册
<?php
$email=htmlspecialchars(trim($_GET['email']));
$msg=[];
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','admin');
$sql = "SELECT COUNT(*) FROM `user` WHERE `email` = :email";
$stmt=$pdo->prepare($sql);
$stmt->bindParam(':email',$email,PDO::PARAM_STR);
$stmt->execute();
if($stmt->fetchColumn(0)>0){
echo json_encode($msg=['message'=>'邮箱已注册,请重新输入','status'=>0]);
}else{
echo json_encode($msg=['message'=>'恭喜可以注册','status'=>1]);
}
//关闭对象
$stmt=null;
//关闭连接
$pdo=null;运行实例 »
点击 "运行实例" 按钮查看在线实例
$ajax在注册后进行登陆验证
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.ajax()函数</title>
<script src="lib/jquery.js"></script>
</head>
<body>
<h3>
$ajax用户登陆验证
</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> <button>注册</button></p>
<script>
/**
* 1. load()方法,$.get(),$.getJSON(),$.getScript(),$.post()都是$.ajax()的快捷方式;
* 2. $.ajax()的参数是一个对象,键名对应的属性非常多,并且键名不允许自定义;
* 3. 实际开发中常用参数:
* (1). url:请求的url资源地址;
* (2). type:请求的类型,get /post;
* (3). data:发送的参数;
* (4). dataType:响应的数据类型 html,xml,json,text
* (5). success:响应成功的回调方法;
* 6. 该方法是jQuery中Ajax的底层实现,前面的方法或函数其实都在它的基础实现的功能封装; *
*
*/
$('button').eq(0).click(function(){
$.ajax({url:'check.php',
type:'post',
data:{email: $('#email').val(),pass: $('#password').val()
},success:function (data) {
// console.log(data);
$('button').next().after('<p style="color:red">'+data.message+'</p>');
$('p').last().fadeOut(3000);
},dataType:'json'
});
});
$('button').eq(1).click(function () {
location.href='demo10.html';
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
check.php验证登陆
<?php
//echo json_encode('测试数据');
//$email = 'admin@php.cn';
//$pass = sha1(123456);
// 连接数据库并验证用户
$email = htmlspecialchars(trim($_POST['email']));
$pass = sha1(htmlspecialchars(trim($_POST['pass'])));
$msg=[];
$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','admin');
$sql = "SELECT COUNT(*) FROM `user` WHERE `email`=:email AND `password`=:password ";
$stmt = $pdo->prepare($sql);
$stmt->execute(['email'=>$email,'password'=>$pass]);
if ($stmt->fetchColumn(0) == 1) {
$msg=[
'status' => 1,
'message' => '验证通过'
];
} else {
$msg=[
'status' => 0,
'message' => '邮箱或密码错误'
];
}
echo json_encode($msg);运行实例 »
点击 "运行实例" 按钮查看在线实例
2.$.getJSON三级联动实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动</title>
<script src="lib/jquery.js"></script>
</head>
<body>
省:<select name="pro" id="pro"></select>
市:<select name="city" id="city"></select>
区县:<select name="area" id="area"></select>
<p id="addr"></p>
<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($(this).find(':selected').text());
// console.log($(this).find(':selected').val()); //查看当前省值
$.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').append('->'+$(this).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').append('->'+$(this).find(':selected').text());
});
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
