老师看看什么问题,实现不了登录的
来源：2-11 脚本
嘟嘟苏
2020-07-10 22:57:32
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<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="请输入注册手机号" data-check="sigup"/>
<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>
<script src="./js/ajax.js"></script>
<script src="./js/register.js"></script>
</body>
</html>
css:
*{
margin:0;
padding:0;
}
body{
background:#333;
}
.register{
width:300px;
height:270px;
margin:80px auto;
padding:15px 30px;
background:#eee;
border-radius:5px;
}
.title{
height:35px;
}
.title span{
font-size:16px;
font-weight:bold;
color:#666;
margin-right:30px;
cursor:pointer;
}
.title span.current{
color:#f00;
}
.form div{
width:290px;
height:30px;
border-radius:8px;
background:#fff;
margin-bottom:25px;
padding:8px 10px;
position:relative;
}
.form div span{
display:inline-block;
padding-top:8px;
padding-right:3px;
color:#666;
}
.form div input{
border:none;
outline:none;
font-size:17px;
color:#666;
background:none;
}
.form div i{
position:absolute;
width:16px;
height:16px;
right:12px;
top:14px;
}
.form div i.ok{
background:url(../img/icon.png) no-repeat 0 -67px;
}
.form div i.no{
background:url(../img/icon.png) no-repeat -17px -67px;
}
.form.info{
margin-top:20px;
color:#f00;
padding-left:2px;
}
.button{
padding-top:7px;
}
.button a{
display:none;
width:100%;
height:45px;
line-height:45px;
text-align:center;
text-decoration:none;
background:#f20d0d;
color:#fff;
border-radius:30px;
font-size:16px;
}
.button a.show{
display:block;
}
register.js:
var user = document.getElementById("user"),
pwd = document.getElementById("pwd"),
title = document.getElementById("title").getElementsByTagName("span"),
info = document.querySelectorAll(".info"),
icon = document.getElementsByTagName("i"),
userReg = /^1[^012]\d{9}$/,
pwdReg = /^[\w@#$%^&*+-\.]{6,20}$/,
sigupBtn = document.getElementById("sigup-btn"),
loginBtn = document.getElementById("login-btn"),
isRepeat = false;//记录用户名是否被占用 ,默认没被占用
function checkUser(){
var userVal = user.value,
dataCheck = user.getAttribute("data-check");
// console.log(dataCheck);
if(dataCheck == "sigup"){
if(!userReg.test(user.value)){
info[0].innerHTML = "手机号无效";
icon[0].className = "no";
}else{
info[0].innerHTML = "";
$.ajax({
url:'http://localhost/register/server/isUserRepeat.php',
method:'post',
async : true,
data:{username:userVal},
success:function(data){
if(data.code == 1){
icon[0].className = "ok";
isRepeat = false;
}else if(data.code == 0){
icon[0].className = "no";
info[0].innerHTML = data.msg;
isRepeat = true;
}else{
alert("检测失败请重试");
}
}
})
}
}
}
function checkPwd(){
var dataCheck = user.getAttribute("data-check");
if(dataCheck == "sigup"){
if(!pwdReg.test(pwd.value)){
info[1].innerHTML = "密码6-12位字母数字及下划线";
icon[1].className = "no";
}else{
info[1].innerHTML = "";
icon[1].className = "ok";
}
}
}
function register(){
var userVal = user.value,
pwdVal = pwd.value;
if(userReg.test(userVal) && pwdReg.test(pwdVal) && !isRepeat){
//发起请求,实现注册
$.ajax({
url:"http://localhost/register/server/register.php",
method:'post',
data:{username:userVal,userpwd:pwdVal},
success:function(data){
console.log(data);
alert("注册成功,请登录");
user.value = "";
pwd.value = "";
showLogin();
},
error:function(){
alert("注册失败");
}
})
}
}
function login(){
var userVal = user.value,
pwdVal = pwd.value;
$.ajax({
url:'http://localhost/register/server/register.php',
method:'post',
data:{username:userVal,userpwd:pwdVal},
success:function(data){
for(var i in data){
console.log(data[i]);
if(data[i].username == userVal && data[i].userpwd == pwdVal){
alert("登陆成功");
}else{
alert("登录失败");
return;
}
}
}
})
}
function showLogin(){
title[0].className = "current";
title[1].className = "";
loginBtn.className = "show";
sigupBtn.className = "";
user.setAttribute("data-check", "login");
info[0].innerHTML = "";
info[1].innerHTML = "";
icon[0].className = "";
icon[1].className = "";
}
function showSigup(){
title[0].className = "";
title[1].className = "current";
loginBtn.className = "";
sigupBtn.className = "show";
user.setAttribute("data-check", "sigup");
}
user.addEventListener("blur",checkUser);
pwd.addEventListener("blur",checkPwd);
sigupBtn.addEventListener("click",register);
loginBtn.addEventListener("click",login);
title[0].addEventListener("click",showLogin);
title[1].addEventListener("click",showSigup);
ajax.js:
//模仿jq封装 ajax
var $ = {
ajax:function(options){ //options接受对象传过来的属性名(即url,method等)
var xhr = null,//创建变量存储实例XMLHttpRequest对象
url = options.url, //URL地址
method = options.method || 'get',//当用户指定请求方式则使用指定的如果没有指定默认get,
async = typeof(options.async) === 'undefined'?true:options.async,
data = options.data || null, //参数
params = '', // 传递的参数以字符串的方式存储
callback = options.success,//ajax请求成功后执行的回调函数
error = options.error;
//将data的对象字面量形式转换为字符串形式
if(data){
for(var i in data){
params += i+'='+data[i]+'&';
}
params = params.replace(/&$/,"");
}
//根据method的值改变url
if(method == "get"){
url += '?'+params;
}
// console.log(url);
if(window.XMLHttpRequest){//如果浏览器支持XMLHttpRequest,那么实例化XMLHttpRequest对象
xhr = new XMLHttpRequest();
}else{ //如果浏览器不支持(IE7),实例化ActiveXObject('Microsoft.XMLHttp(版本号)')对象
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if((xhr.status >=200 && xhr.status<300) || xhr.status === 304){
callback && callback(JSON.parse(xhr.responseText));
}else{
error && error();
}
}
}
//创建请求
xhr.open(method,url,async);
//如果是post请求要设置头部信息 ,头部信息的作用是表示将请求中的内容，按照UTF-8的方式进行编码，只针对POST请求有效，设置此内容是为了确保服务器知道实体中有参数变量
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求
xhr.send(params);
}
}
//jq的ajax的调用
// $.ajax({
// url:"http://127.0.0.1",//请求的服务端地址
// method:"get",//请求方式
// async:false,//是否同步或异步,默认true异步,false同步
// data:{username:123456,password:1234567},//给服务端传输的数据
// success:function(){//执行成功执行的函数
// },
// error:function(){
// }
// })
1回答
-
好帮手慕星星
2020-07-11
同学你好，课程中并没有给出登录相关的php文件，也没有实现登录。
粘贴的代码中登录用了注册的php文件，点击登录的时候控制台输出‘用户名重复’，显然是不对的。这里可以不测试登录效果。
祝学习愉快！
0
相似问题