Ajax功能介绍
上一篇已经介绍过
##先来介绍一下Ajax Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重....
成果展示
功能实现
- 局部检测账号是不为手机号,无刷新提醒
- 后台调用数据检测数据是不注册过,无刷新提醒(json模拟)
- 检测密码是不符合规范
JSON数据
代码部分
HTML
<div class="register">
<p class="title" id="title">
<span>登录</span>
<span class="current">注册</span>
</p>
<div class="form">
<div>
<span>+86</span>
<input type="text" name="user" id="user" placeholder="请输入注册手机号" autocomplete="off">
<i id="user_icon"></i>
<p class="info" id="user_info"></p>
</div>
<div>
<input type="password" name="pwd" id="pwd" placeholder="请设置密码">
<i id="pwd_icon"></i>
<p class="info" id="pwd_info"></p>
</div>
<p class="button">
<a href="javascript:void(0)" id="sigup-btn" class="btn show">注册</a>
<a href="javascript:void(0)" id="login-btn" class="btn">登录</a>
</p>
</div>
</div>
JS
<script>
var user = document.getElementById('user'),
pwd = document.getElementById('pwd'),
sigup = document.getElementById('sigup-btn'),
login = document.getElementById('login-btn'),
titles = document.getElementById('title').getElementsByTagName('span'),
userInfo = document.getElementById('user_info'),
userIcon = document.getElementById('user_icon'),
pwdInfo = document.getElementById('pwd_info'),
pwdIcon = document.getElementById('pwd_icon'),
userReg = /^1[3578]\d{9}$/,
pwdReg = /^\w{5,12}$/,
isRepeat = false; //记录用户名是不占用
//检测用户
function checkUser(){
var userVal = user.value;
//检测手机号是不有效
if(!userReg.test(userVal)){
userInfo.innerHTML = '手机号码无效'
userIcon.className = 'no';
}else{
userInfo.innerHTML = ''
userIcon.className = '';
//发起请求
$.ajax({
url:'http://ob.com/HTML/server/isUserRepeat.php',
data:{username:userVal},
success:function(data){
console.log(data);
if(data.code == 1){
userIcon.className = 'ok';
isRepeat = false;
console.log(data);
}else if(data.code == 0){
userIcon.className = 'no';
isRepeat = true;
userInfo.innerHTML = data.msg;
console.log(data.msg);
}else{
userInfo.innerHTML = '检测失败,请重试....';
}
}
})
}
}
//检测密码
function checkPwd(){
var pwdVal = pwd.value;
if(!pwdReg.test(pwdVal)){
pwdInfo.innerHTML = '请输入5到12位的字母,数字及下划线';
pwdIcon.className = 'no';
}else{
pwdInfo.innerHTML = '';
pwdIcon.className = 'ok';
}
}
//注册
function register(){
var userVal = user.value,
pwdVal = pwd.value;
if(userReg.test(userVal) && pwdReg.test(pwdVal) && !isRepeat){
$.ajax({
url:"http://ob.com/HTML/server/register.php",
method:"post",
data:{username:userVal,userpwd:pwdVal},
success:function(data){
alert('注册成功');
//载入登录界面
showLogin();
//清空文本框
console.log(data);
user.value = '';
pwd.value = '';
},
error:function(){
console.log('注册失败');
pwdInfo.innerHTML = '注册失败'
}
})
}
}
//登录切换
function showLogin(){
//载入登录界面
titles[0].className = "current";
titles[1].className = '';
login.className = 'show';
sigup.className = '';
}
//注册切换
function showSigup(){
//载入登录界面
titles[1].className = "current";
titles[0].className = '';
login.className = '';
sigup.className = 'show';
}
//绑定事件,检测用户是不注册过
user.addEventListener("blur",checkUser,false);
//绑定事件,检测密码的有效性
pwd.addEventListener("blur",checkPwd,false);
//注册
sigup.addEventListener("click",register,false);
//登录高亮
titles[0].addEventListener("click",showLogin,false);
//注册高亮
titles[1].addEventListener("click",showSigup,false);
</script>
js通过正则表达式检测账号密码的规范性,Ajax调用数据检测账号的重复性
Ajax使用同文上链接一样
后台操作文件
<?php
header('Content-Type:application/json');
$isUsername = array_key_exists('username',$_REQUEST);
$username = $isUsername ? $_REQUEST['username'] : '';
if(!$username){
$msg = printMsg('参数有误',2);
echo json_encode($msg);
exit();
}
function printMsg($msg,$code){
return array('msg'=>$msg,'code'=>$code);
}
// 记录存储用户的文件路径
$fileStr = __DIR__.'/user.json';
// 读取现存的用户名和密码
$fileStream = fopen($fileStr,'r');
$fileContent = fread($fileStream,filesize($fileStr));
$fileContent_array = $fileContent ? json_decode($fileContent,true) : array();
fclose($fileStream);
// 判断用户名是否有重复的
$isrepeat = false;
foreach($fileContent_array as $key=>$val){
if($val['username'] === $username){
$isrepeat = true;
break;
}
}
if($isrepeat){
$msg = printMsg('用户名重复',0);
echo json_encode($msg);
exit();
}
$msg = printMsg('用户名可用',1);
echo json_encode($msg);
?>
<?php
header('Content-Type:application/json');
// 获取前端传递的注册信息 字段为 username userpwd
$isUsername = array_key_exists('username',$_REQUEST);
$isUserpwd = array_key_exists('userpwd',$_REQUEST);
$username = $isUsername ? $_REQUEST['username'] : '';
$userpwd = $isUserpwd ? $_REQUEST['userpwd'] : '';
function printMsg($msg,$code){
return array('msg'=>$msg,'code'=>$code);
}
if(!$username || !$userpwd){
$msg = printMsg('参数有误',0);
echo json_encode($msg);
exit();
}
// 记录存储用户的文件路径
$fileStr = __DIR__.'/user.json';
// 读取现存的用户名和密码
$fileStream = fopen($fileStr,'r');
$fileContent = fread($fileStream,filesize($fileStr));
$fileContent_array = $fileContent ? json_decode($fileContent,true) : array();
fclose($fileStream);
// 判断用户名是否有重复的
$isrepeat = false;
foreach($fileContent_array as $key=>$val){
if($val['username'] === $username){
$isrepeat = true;
break;
}
}
if($isrepeat){
$msg = printMsg('用户名重复',0);
echo json_encode($msg);
exit();
}
array_push($fileContent_array,array('username'=>$username,'userpwd'=>$userpwd));
// 将存储的用户名密码写入
$fileStream = fopen($fileStr,'w');
fwrite($fileStream,json_encode($fileContent_array));
fclose($fileStream);
echo json_encode(printMsg('注册成功',1));
这里写入的是json文件(模拟)
原创文章,作者:zbwyfkx,如若转载,请注明出处:https://www.fenkexie.cn/archives/91/