出了什么问题?
//myajax
// 创建一个对象,把ajax的方法写在对象里
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, //没有指定async就默认为true,否则用用户定义的async
data = options.data || null, //参数
params = '',
callback = options.success, //ajax请求成功的回调函数
error = options.error; //请求失败时的操作
// 因为用户调用ajax中data以字面量形式传数据data:{username:'1234',pwd:'5678},但是实际中以字符串形式传输数据 XHR.send(null)或者HXR.send('username=1234&pwd=5678')传输数据,所以要将data内容以字面量形式转成字符串
// 将data字面量的形式转换为字符串的形式(前提情况是data为有值的情况下)
if (data) {
for (var i in data) { //data的属性数量不确定,可能有多个,就需要对data对象做遍历
params += i + '=' + data[i] + '&';
}
params = params.replace(/&$/, ''); //替换掉最后一个&
}
// 根据method的值,改变url地址。使用get,将数据都放在url地址上传递
if (method === 'get') {
url += '?' + params;
}
// 第一步:创建XHLHttpRequest对象
if (typeof XMLHttpRequest != "undefined") { //浏览器支持创建XMLHttpRequest对象
XHR = new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
var XHRArray = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
for (var i = 0; i < XHRArray.length; i++) {
try {
// 创建ActiveXObject对象
new ActiveXObject(XHRArray[i]);
break;
} catch (error) {
}
}
} else {
throw new Error('No XHR object available.');
}
//响应XMLHttpRequest对象状态变化的函数,onreadystatechange在readystatechange属性发生改变时触发
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();
}
}
}
// 第二步:创建请求
XHR.open(method, url, async);
// 如果是post请求,要写头部信息
XHR.setRequestHeader("Content-type", "application/x-www-from-urlencoded"); //设置头部信息 告诉服务器要发送一个表单
// 第三步:发送请求
XHR.send(params); //使用post请求 send(username="123"&pwd="456") 使用get请求,参数放在url地址后面
}
};
//css
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background: #333;
}
.register {
width: 330px;
height: 270px;
margin: 80px auto;
padding: 15px 30px;
background-color: #eeeeee;
border-radius: 5px;
}
.title {
height: 35px;
}
.title span {
font-size: 16px;
font-weight: bold;
color: #666;
cursor: pointer;
margin-right: 30px;
}
.title span .current {
color: red;
}
.form div {
position: relative;
width: 290px;
height: 30px;
border-radius: 8px;
background-color: #ffffff;
margin-bottom: 25px;
padding: 8px 10px;
}
.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: 14px;
}
.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: 16px;
color: #ff0000;
padding-left: 2px;
}
.button {
padding-top: 7px;
}
.button a {
display: block;
width: 100%;
height: 45px;
text-align: center;
line-height: 45px;
text-decoration: none;
background-color: #ff0000;
color: #ffffff;
border-radius: 30px;
font-size: 16px;
}
//html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>register</title>
<link rel="stylesheet" href="css/mystyle.css" type="text/css" />
</head>
<body>
<div class="register">
<p class="title">
<span>登陆</span>
<span class="current">注册</span>
</p>
<div class="form">
<!-- 使用ajax登陆注册没有必要提交表单,所以不需要from表单标签 -->
<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></i>
<p class="info"></p>
</div>
<p class="button">
<!-- 通过ajax验证提交表单所以不需要 表单按钮标签 -->
<a href="javascript:void(0)" id="signup-btn" class="btn">注册</a>
</p>
</div>
</div>
<script type="text/javascript" src="js/myajax.js"></script>
<script type="text/javascript">
function byId(name) {
return typeof(name) === 'string' ? document.getElementById(name) : name;
}
var user = byId('user'),
pwd = byId('pwd'),
signup = byId('signup-btn'),
userInfo = byId('user_info'),
userIcon = byId('user_icon');
// 检测用户
function checkUser() {
var userVal = user.value,
userReg = /^1[3578]\d{9}$/;
// 验证手机号是否有效
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) {
console.log(data);
}
});
}
}
// 绑定失去焦点事件,检测用户是否注册过
user.addEventListener("blur", checkUser, false);
</script>
</body>
</html>
老师,为什么我在success:function(data){console.log(data); 会出问题?是我的url地址写错吗?还是其他什么原因?
这几张图是我放在wampserver的www目录的位置
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧