为什么要用ajax登录,登录用ajax还是不会写-CSDN博客

html>

Document

+86

var titles = document.getElementById('title').getElementsByTagName('span'), //登录和注册按钮

user = document.getElementById('user'), //用户输入框

userInfo = document.getElementById('user_info'), //用户名提示文字

userIcon = document.getElementById('user_icon'), //用户名提示图标

pwd = document.getElementById('pwd'), //密码框

pwdIcon = document.getElementById('pwd_icon'), //密码栏的图标

pwdInfo = document.getElementById('pwd_info'), //密码栏的提示文字

sigup = document.getElementById('sigup-btn'), //注册按钮

userReg = /^1[3-8][0-9]{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://localhost/register/server/isUserRepeat.php',

method:'post',

async:true,

data:{username:userVal},

success:function(data){

if(data.code == 1){

userIcon.className = 'ok';

isrepeat = false;

}else if(data.code ==0){

userIcon.className = 'no';

userInfo.innerHTML = data.msg;

isrepeat = true;

}else{

userIcon.className = 'no';

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://localhost/register/server/register.php',

method:'post',

async:true,

data:{username:userVal,userpwd:pwdVal},

success:function(data){

alert('注册成功,请登录！');

//跳转到登录页面

titles[0].className = 'current';

titles[1].className = '';

sigup.className = '';

//清空输入框

user.value = '';

pwd.value = '';

error:function(){

pwdInfo.innerHTML = '注册失败，请重新输入';

}

})

}

//登录

function logins(){

//获取到用户名和密码的值

var userVal = user.value,

pwdVal = pwd.value;

$.ajax({

url:'http://localhost/register/server/register.php',

method:'post',

async:true,

data:{username:userVal,userpwd:pwdVal},

success:function(data){

check(data,userVal,pwdVal);

error:function(){

pwdInfo.innerHTML = '登录失败，请重新输入';

}

})

}

function check(data,userVal,pwdVal){

for(var i in data){

if(data[i].username==userVal && data[i].userpwd==pwdVal){

user.value='';

pwd.value='';

return alert('登录成功!');

}else if(data[i].userpwd==pwdVl){

return alert('用户名错误')

}else if(data[i].username==userVl){

return alert('密码错误')

}

return alert('账号密码错误请重试')

}

//绑定事件，检测用户手机号是否合法

user.addEventListener('blur',checkUser,false);

//绑定事件，检测密码的有效性及是否注册

pwd.addEventListener('blur',checkPwd,false);

//绑定事件，注册

sigup.addEventListener('click',register,false);

//切换成登录

titles[0].addEventListener('click',function(){

titles[0].className = 'current';

titles[1].className = '';

sigup.className = '';

},false);

//切换成注册

titles[1].addEventListener('click',function(){

titles[1].className = 'current';

titles[0].className = '';

sigup.className = 'show';

},false);

margin: 0;

padding: 0;

}

body{

background-color: #333;

}

.register{

width: 300px;

height: 270px;

margin: 80px auto;

padding: 15px 30px;

background-color: #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-color: #fff;

margin-bottom: 25px;

padding: 8px 10px;

position: relative;

}

.form div span{

display: inline-block;

padding-top: 4px;

padding-right: 3px;

color: #666;

}

.form div input{

border: none;

outline: none;

padding-top: 6px;

font-size: 16px;

color: #666;

background: none;

}

.form div i{

top: 14px;

right: 12px;

width: 16px;

height: 16px;

position: absolute;

}

.form div i.ok{

background: url(../img/icon.png) no-repeat 0 -67px;

/* display: none; */

}

.form div i.no{

background: url(../img/icon.png) no-repeat -17px -67px;

}

.form .info{

margin-top: 14px;

color: #f00;

padding-left: 2px;

}

.button{

padding-top: 7px;

}

.button a{

text-decoration: none;

color: #fff;

display: none;

width: 100%;

height: 45px;

background: #f20d0d;

border-radius: 30px;

text-align: center;

line-height: 45px;

font-size: 16px;

}

.button a.show{

display: block;

}var $ = {

ajax:function(options){

var xhr = null, //XMLHttpRequest对象

url = options.url, //url地址

method = options.method || 'get', //传输方式，默认为get

async = typeof(options.async) === 'undefined'?true:options.async, //同步异步ss

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(/&$/,'');

console.log(params);

}

//根据method的值改变url

if(method === 'get'){

url +='?'+params;

}

//判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，firefox、opera等

if(typeof XMLHttpRequest != 'undefined'){

xhr = new XMLHttpRequest();

}else if(typeof ActiveXObject != 'undefined'){

//将所有可能出现的ActiveXObject版本放在一个数组中

var xhrArr = ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0','MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP'];

//遍历创建XMLHttpRequest对象

var len = xhrArr.length;

for(var i=0;i

try{

//创建XMLHttpRequest对象

xhr = new ActiveXObject(xhrArr[i]);

//如果创建XMLHttpRequest对象成功，则跳出循环

break;

}

catch(ex){}

}

}else{

throw new Error('No XHR object availabel.');

}

//相应xhr对象状态变化的函数

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();

}

//创建Http请求

xhr.open(method,url,async);

//添加Http头部

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

//发送请求

xhr.send(params);

}

怎么办啊，跟着老师的代码敲完还是一知半解的，能看懂但是想不到