老师,为什么我跟着老师一模一样的代码一行一行写下去,我点击注册永远失败?
<!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 星