报错找不到原因
html
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<div class="register">
<p class="title" id="title">
<span>登 录</span>
<span class="current">注 册</span>
</p>
<form class="form">
<div class="com">
<span>+86</span>
<input type="text" name="user" id="user" placeholder="请输入手机号码">
<i id="user_icon"></i>
<p class="info" id="user_info"></p>
</div>
<div class="com">
<input type="password" name="psw" id="psw" placeholder="请设置密码">
<i id="psw_icon"></i>
<p class="info" id="psw_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>
</form>
</div>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
var user=document.getElementById("user"),
psw=document.getElementById("psw"),
btn=document.getElementById("sigup-btn"),
userInfo=document.getElementById("user_info"),
userIcon=document.getElementById("user_icon"),
pswIcon=document.getElementById("psw_icon"),
pswInfo=document.getElementById("psw_info"),
tel=/^1[3456789]\d{9}$/,
password=/^\w{5,12}$/,
isRepeat = false; // 记录用户名是否被占用
function checkUser(){
var userVal = user.value;
// 验证手机号是否有效
if(!tel.test(userVal)){
userInfo.innerHTML = '手机号码无效！';
userIcon.className = 'no';
}else{
userInfo.innerHTML = '';
userIcon.className = 'ok';
}
// 发起请求
$.ajax({
url:'http://localhost/练习/server/register/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{
userInfo.innerHTML = '检测失败，请重试...'
}
}
})
}
function checkPassword(){
var pwdVal=psw.value;
if(!password.test(pwdVal)){
psw_info.innerHTML = '密码无效！';
pswIcon.className = 'no';
}else{
pswInfo.innerHTML = '';
pswIcon.className = 'ok';
}
}
//注册功能
function register(){
var userVal = user.value,
pwdVal=psw.value;
if(password.test(pwdVal)&&tel.test(userVal)&&!isRepeat){
$.ajax({
url:'http://localhost/练习/server/register/register.php',
method:"post",
async:true,
data:{username:userVal,userpwd:pwdVal},
success:function(data){
alert('注册成功，请登录！');},
error:function(data){
alert('注册失败，请重试！');}
})
}
}
user.addEventListener("blur",checkUser,false);
psw.addEventListener("blur",checkPassword,false);
btn.addEventListener("click",register,false);
</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;
}
.current{
color:#f00;
}
.com{
width:290px;
height:30px;
border-radius:8px;
background:#fff;
margin-bottom:30px;
padding:8px 10px;
position:relative;
line-height: 30px;
}
.com input{
border: none;
outline:none;
background:none;
font-size: 16px;
}
.com i{
position:absolute;
right:12px;
top:12px;
width:16px;
height:16px;
}
.com i.ok{
background:url(../img/icon.png) no-repeat 0px -67px;
}
.com i.no{
background:url(../img/icon.png) no-repeat -17px -67px;
}
.info{
margin-top:12px;
color:#f00;
}
.button{
padding-top:7px;
}
.button a{
display:block;
background:#f20d0d;
text-align:center;
width:100%;
height:45px;
line-height:45px;
text-decoration:none;
color:#fff;
font-size:16px;
border-radius:30px;}
ajax
var $={
ajax:function(options){
var url=options.url,
method=options.method||'get',
async=typeof(options.async)==="undefined"?true:options.async,
data=options.data||null,
params = ''
success=options.success,
error=options.error
// 将data的对象字面量的形式转换为字符串形式
if(data){
for(var i in data){
params+=i+'='+data[i]+'&';
}
params=params.replace(/&$/,"");
}
console.log(params);
if (method=='get') {
url+='?'+params;
}
//封装通用的xhr,兼容各个版本
function createXHR() {
//判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，Firefox，Opera等浏览器
if (typeof XMLHttpRequest != "undefined") {
return 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.");
}
}
var xhr = createXHR();
//响应XMLHttpRequest对象状态变化的函数
xhr.onreadystatechange = function() {
//异步调用成功
if (xhr.readyState === 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
//获得服务器返回的数据
console.log(xhr.responseText)
success&&success(JSON.parse(xhr.responseText));
} else {
console.log('unsuccess');
}
}
};
//失去焦点时触发http创建请求
var user = document.getElementById("user");
//创建http请求
xhr.open(method,url,async);
// 设定post方式的头部信息
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送http请求
xhr.send(params);
},jsonp:function getJSONP(url, callback) {
if (!url) {
return;
}
var a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']; //定义一个数组以便产生随机函数名
var r1 = Math.floor(Math.random() * 10);
var r2 = Math.floor(Math.random() * 10);
var r3 = Math.floor(Math.random() * 10);
var name = 'getJSONP' + a[r1] + a[r2] + a[r3];
var cbname = 'getJSONP.' + name; //作为jsonp函数的属性
if (url.indexOf('?') === -1) {
url += '?jsonp=' + cbname;
} else {
url += '&jsonp=' + cbname;
}
var script = document.createElement('script');
//定义被脚本执行的回调函数
getJSONP[name] = function(e) {
try {
callback && callback(e);
} catch (e) {
//
} finally {
//最后删除该函数与script元素
delete getJSONP[name];
script.parentNode.removeChild(script);
}
}
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
},
// // 跨域调用
// getJSONP(url, function(response) {
// console.log(response);
// });
}
正在回答
同学你好，这边测试代码没有出现报错，正常注册
建议清除浏览器缓存或者更换浏览器重新测试下。
另外，代码中两个php文件路径和课程中不一致，建议检查是否正确，文件可以直接使用源码中提供的。
自己再测试下，祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星