老师看下这个,这个报错我解决不了
字数受限只能在问一遍了哈哈哈
老师我没有发现问题在哪里 希望老师指教一下
ajax.js部分
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, //同异步
data = options.data || null, //传参
params = '',
callback = options.success, // ajax请求成功后的回调函数
error = options.error; //ajax请求失败后执行的函数
//将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;
}
// console.log(url);
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.");
}
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);
},
//跨域
jsonp:function(){}
}
// $.ajax({
// url: "http:127.0.0.1/register.php",
// method: "post",
// async: false,
// data: { username: "zangsan", pwd: "123456" },
// success: function () { },
// error: function () { }
// })
js.js部分
var user = document.getElementById("user"),
pwd = document.getElementById("password"),
sigup = document.getElementById("sigup-up"),
login = document.getElementById("login-up"),
titles = document.getElementById("title").getElementsByTagName("span"),
pwdinfo = document.getElementById("pwdinfo"),
userinfo = document.getElementById("userinfo"),
isrepeat = false; // 用户名是否被占用 默认为false
// usericon=document.getElementById("user_icon");
//检测用户
function checkuser() {
var uservalue = user.value;
//验证手机号码是否有效
userreg = /^1[345789]\d{9}$/;
if (!userreg.test(uservalue)) {
userinfo.innerHTML = "请输入有效的手机号码";
// usericon.className="no";
} else {
userinfo.innerHTML = "";
// usericon.className="";
//发起请求
$.ajax({
url: "http://localhost/ajax_json_register/server/isUserRepeat.php",
method: "post",
async: true,
data: { username: uservalue },
success: function (data) {
// usericon.className="ok";
if (data.code == 1) {
isrepeat = false;
} else if (data.code == 0) {
userinfo.innerHTML = data.msg;
isrepeat = true;
} else {
userinfo.innerHTML = '检测失败,请重试...';
}
}
})
}
}
//检测密码
function checkpwd() {
var pwdvalue = pwd.value,
pwdreg = /^\d{5,12}$/;
if (!pwdreg.test(pwdvalue)) {
pwdinfo.innerHTML = "请输入5-12位的数字";
} else {
pwdinfo.innerHTML = "";
}
}
//注册
function register() {
//手机号有效且未被注册 用户名合法
var uservalue = user.value,
userreg = /^1[3456789]\d{9}$/,
pwdvalue = pwd.value,
pwdreg = /^\d{5,12}$/;
if (userreg.test(uservalue) && pwdreg.test(pwdvalue) && !isrepeat) {
// console.log("ok");
//发起请求 实现注册
$.ajax({
url: "http://localhost/ajax_json_register/server/register.php",
method: "post",
data: { username: uservalue, userpwd: pwdvalue },
success: function (data) {
alert("注册成功,请登录");
//载入登陆界面 登陆页面高亮显示
showLogin();
//清空文本框
// uservalue = "";
// pwdvalue = "";
user.value = "";
pwd.value = "";
},
error: function () {
pwdinfo.innerHTML = "注册失败,请重试!";
}
})
}
}
//登陆验证
function logincheck() {
var uservalue = user.value,
pwdvalue = pwd.value,
userreg = /^1[3456789]\d{9}$/,
pwdreg = /^\d{5,12}$/;
if (userreg.test(uservalue) && pwdreg.test(pwdvalue)) {
$.ajax({
url: "http://localhost/ajax_json_register/server/user.json",
method: "post",
dataType: JSON,
data: { username: uservalue, userpwd: pwdvalue },
success: function (data) {
for (var i in data) {
if (data[i].username === uservalue && data[i].userpwd === pwdvalue) {
alert("登陆成功");
} else {
alert("密码或用户名错误请重新输入");
}
}
},
error: function () {
alert("登录失败,请重试");
}
})
}
}
//显示登陆
function showLogin() {
titles[0].className = "current";
titles[1].className = "";
login.className = "show";
sigup.className = "";
}
//显示注册
function showregister() {
titles[1].className = "current";
titles[0].className = "";
login.className = "";
sigup.className = "show";
}
//绑定事件,检测用户是否注册
user.addEventListener("blur", checkuser, false);
//绑定事件,检测密码有效性
pwd.addEventListener("blur", checkpwd, false);
//注册
sigup.addEventListener("click", register, false);
// 登陆高亮
titles[0].addEventListener("click", showLogin, false);
//注册高亮
titles[1].addEventListener("click", showregister, false);
//登陆
login.addEventListener("click", logincheck, false)
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册</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="请输入手机号" autocomplete="off" data_check="sigup">
<!-- <i id="user_icon"></i> -->
<p class="info" id="userinfo"></p>
</div>
<div>
<input type="password" name="password" id="password" placeholder="请输入密码">
<!-- <i class="no"></i> -->
<p class="info" id="pwdinfo"></p>
</div>
<p class="button">
<a href="javascript:void(0)" id="sigup-up" class="btn show">注册</a>
<a href="javascript:void(0)" id="login-up" class="btn">登陆</a>
</p>
</div>
</div>
<script src="js/ajax.js"></script>
<script src="js/js.js"></script>
</body>
</html>
css部分
*{
padding: 0;
margin: 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{
width: 16px;
height: 16px;
position: absolute;
right: 12px;
top: 12px;
}
/* .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: 13px;
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;
}
server是用课程里面的
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星