老师,为什么我跟着老师一模一样的代码一行一行写下去,我点击注册永远失败?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Register</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="register">
<p class="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">注 册</a>
</p>
</div>
</div>
<script src="script/ajax.js"></script>
<script>
var user = document.getElementById('user'),
pwd = document.getElementById('pwd'),
sigup = document.getElementById('sigup-btn'),
userInfo = document.getElementById('user_info'),
userIcon = document.getElementById('user_icon'),
pwdInfo = document.getElementById('pwd_info'),
pwdIcon = document.getElementById('pwd_icon'),
userReg = /^1[34578]\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请求
$.ajax({
url:'http://localhost/register-demo/server/isUserRepeat.php',
method:'get',
async:true,
data:{username:userVal},
success:function(data){
userIcon.className = 'ok';
isRepeat = false;
if(data.code == 1){
userIcon.className = 'ok';
}else if(data.code == 0){
userIcon.className = 'no';
isRepeat = true;
userInfo.innerHTML = 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 user_val = user.value,
pwd_val = pwd.value;
//如果手机号有效且没有被占用,同时密码合法,方可注册
if(userReg.test(user_val) && pwdReg.test(pwd_val) && !isRepeat ){
//发起ajax请求实现注册
$.ajax({
url:'http://localhost/server/register.php',
method:'post',
data:{username:user_val,userpwd:pwd_val},
success:function(data){
console.log(data);
alert('注册成功,请登录!');
user.value = '';
pwd.value = '';
},
error:function(){
pwdInfo.innerHTML = '注册失败,请重试!';
}
})
}
}
//绑定事件,检测用户的有效性以及是否注册过
user.addEventListener('blur',checkUser,false);
//检测密码的有效性
pwd.addEventListener('blur',checkPwd,false);
//注册
sigup.addEventListener('click',register,false);
</script>
</body>
</html>下面是ajax.js,我的都在本地服务器运行的,server也拷贝了,url也引用成功
var $ = {
ajax:function(options){
var xhr = null,//XMLHttpRequest对象
url = options.url,
method = options.method || 'get',//默认为get,前面没有的话是undefined
async = typeof (options.async) === 'undefined'?true:options.async,//不能像method一样||或判断,因为如果用户设置是false,fasle||ture还是ture.
data = options.data||null,//post--send(data转换字符串) send(null)--get
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;
}
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<len;i++)
{
try
{
//创建XMLHttpRequest对象
xhr = new ActiveXObject(xhrArr[i]);
//如果创建XMLHttpRequest对象成功,则跳出循环
break;
}
catch(ex)
{
}
}
} else {
throw new Error("No XHR object available.");
}//第一步截止目前完成 创建XMLHttpRequest对象
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);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.send(params);
},
}//模仿jQuery的方法ajax还有一问题就是为什么打开F12控制台运行的时候,刚填完手机号码,代码就会中断在send(params)这了,要点击继续的小三角号才会显示右边绿色的打钩
32
收起
正在回答 回答被采纳积分+1
2回答
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星