输出不了obj,请老师拯救

输出不了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

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕言 2019-09-24 18:08:54

同学你好,老师这边测试是可以的,不知道同学的目录结构和具体进行了什么操作,另外这块内容同学还不是很了解,建议同学可以根据老师视频中讲解的内容保持一致。再进行测试哦

如果帮助到了你,欢迎采纳~祝学习愉快~

好帮手慕言 2019-09-24 13:42:56

同学你好,是视频中的这个Object吗

http://img1.sycdn.imooc.com//climg/5d89abce09896ab506610227.jpg

如果是的话,老师使用同学的代码测试(路径修改为老师的正确路径),是可以输出的

http://img1.sycdn.imooc.com//climg/5d89ac6d098e77fc17120401.jpg

http://img1.sycdn.imooc.com//climg/5d89acb009d72d7004070085.jpg

同学不能输入有可能是路径的问题。建议在不熟悉的情况下跟着老师视频中一步一步来哦。

如果帮助到了你,欢迎采纳~祝学习愉快~

  • 提问者 10hours #1
    老师的路径我测试了一下,发现找不到 会报错Access to XMLHttpRequest at 'http://localhost/httprequest/server/isUserRepeat.php' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource 如果我的路径是url:"http://localhost:8080/httprequest/server/isUserRepeat.php"却又不会报错 但是console后控制台没有任何东西
    2019-09-24 15:26:41
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师