输出不了obj,请老师拯救
html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>register</title>
<link rel="stylesheet" type="text/css" href="../css/demo/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="userIcon"></i>
<p class="info" id="userInfo"></p>
</div>
<div>
<input type="password" name="password" id="password" placeholder="请输入密码">
<i></i>
<p class="info"></p>
</div>
<p class="button">
<a href="javascript:void(0)" id="signup-btn" class="btn">注册</a>
</p>
</div>
</div>
<script type="text/javascript" src="../js/script.js"></script>
<script type="text/javascript">
var user=document.getElementById("user"),
pwd=document.getElementById("password"),
signUp=document.getElementById("signup-btn"),
userInfo=document.getElementById("userInfo"),
userIcon=document.getElementById("userIcon");
//检测用户
function checkUser(){
var userReg=/^1[3578]\d{9}$/;
var userVal=user.value;
//验证手机号是否有效
if(!userReg.test(userVal)){
userInfo.innerHTML="手机号输入有误";
userIcon.className="no";
}else{
userInfo.innerHTML="手机号有效";
userInfo.style.color="green";
userIcon.className="ok";
//发起请求
$.ajax({
url:"http://localhost:8080/httprequest/demo/register-demo/server/isUserRepeat.php",
method:"post",
async:true,
data:{username:userVal},
success:function(data){
console.log(data);
}
})
}
}
//绑定事件,检测用户是否注册过
user.addEventListener("blur",checkUser,false);
</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: 4px;
}
.form div input{
border: none;
outline: none; /*删去内外文本框*/
font-size: 16px;
color: #666;
background: none;
}
.form div i{
position: absolute;
width: 16px;
height: 16px;
right: 12px;
top: 15px;
}
.form div .ok{
background: url("../../img/11/icon.png") no-repeat 0 -67px;
}
.form div .no{
background: url("../../img/11/icon.png") no-repeat -17px -67px;
}
.form .info{
margin:14px;
color: #f00;
padding-left: 5px;
}
.button{
padding-top: 7px;
}
.button a{
display: block; /*转换成块级元素 定义宽高*/
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
text-decoration: none;
background: #f20d0d;
color: #fff;
border-radius: 30px;
font-size: 16px;
}
js
var $={
ajax:function(options){
var xhr=null,
url=options.url,
method= options.method || "get", //如果用户没有设置method options.method为"undefined" 默认使用GET
async= typeof(options.async) === "undefined"?true:options.async,
data= options.data || null,
params="",
callback=options.success, //ajax请求成功的回调函数
error=options.error;
//将data的对象字面量形式转化成字符串形式 data:{username:"asd123",pwd:"zh123456"} → username=asd123&pwd=zh123456
for (var i in data){
params += i+ "=" +data[i] +"&";
}
params=params.replace(/&$/,"");
if( method === "get"){
url += "?" + params;
}
if(typeof XMLHttpRequest != "undefined"){
xhr= new XMLHttpRequest();
}else if(typeof ActiveXObject != "undefined"){
// 将所有可能出现的版本放在一个数组之内
var xhrArr=["Microsoft.XMLHTTP",
"MSXML2.XHLHTTP.5.0",
"MSXML2.XHLHTTP.4.0",
"MSXML2.XHLHTTP.3.0",
"MSXML2.XHLHTTP.2.0"];
//遍历创建XMLHTTPRequest对象
var len=xhrArr.length;
for (var i=0;i<len;i++){
try{
//遍历创建XMLHTTPRequest对象
xhr =new ActiveXObject(xhrArr[i]);
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();
}
}
}
//创建请求
xhr.open(method,url,async);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(params);
}
}
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星