有两个问题问下老师

有两个问题问下老师

跟着老师敲的源码如下:
ajax源码:

var $ = {
   ajax: function (options) {
       var xhr = new XMLHttpRequest(); //XMLHttpRequest对象
       var url = options.url; //url地址
       var method = options.method || 'GET'; //传输方式, 默认为get
       var async = typeof options.async === 'undefined' ? true : options.async; //同步或者异步
       var data = options.data || null; //参数
       var params = '';
       var callback = options.success; //ajax请求成功后的回调函数
       var error = options.error; //ajax请求失败后的回调函数
       //将data的对象字面量形式转换成字符串形式
       if(data){
           for (var i in data){
               params += i + '=' + data[i] + '&';
           }
           params = params.replace(/&$/,'');
       }
       //根据method的值改变URL
       if(method === 'GET'){
           url += '?' + params;
       }
       //创建及发送请求
       xhr.open(method,url,async);
       xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
       xhr.send(params);
       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();
               }
           }
       }
   }
};

js源码:

var user = document.getElementById('user');
var pwd = document.getElementById('pws');
var sigup = document.getElementById('sigup-btn');
var userInfo = document.getElementById('user_info');
var userIcon = document.getElementById('user_icon');
//检测用户
function checkUser(){
   var userVal = user.value;
   var userReg = /^1[3578]\d{9}$/;
   //验证手机号码是否有效
   if(!userReg.test(userVal)){
       userInfo.innerHTML = '手机号码无效!';
       userIcon.className = 'no';
   }
   else {
       userInfo.innerHTML = '';
       userIcon.className = '';
       //发起请求
       $.ajax({
           url: 'register/server/isUserRepeat.php',
           data:{username: userVal},
           success: function (a) {
               userIcon.className = 'ok';
               console.log(a)
           }
       })
   }
}

//绑定事件， 检测用户是否注册过
user.addEventListener('blur',checkUser);

然后打印出来就是这样(跟老师打印的结果不一样,结果为“参数有误“了)：

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

感觉这种情况语法没有错误, 应该是数据的问题， 请老师帮忙分析一下.

然后第二个问题就是关于success 回调函数的参数, 也就是上面代码中参数a，不明白这个参数表示什么意思, 是success回调函数默认的还是人为设置的? 传入这个参数又有什么作用呢?
慕仙0287733 2020-06-28
源自：项目：jSon和Ajax登录功能   2-8 js脚本
20
收起

正在回答 回答被采纳积分+1

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

3回答
好帮手慕夭夭 2020-06-29 09:39:37

同学你好，问题解答如下：

1.这个报错是网页的图标没有加载到，这个图标是浏览器默认加载的，可能网络不好就加载不上，不用关心这个哦。

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

2.老师这边使用同学的代码测试，没有问题，如下：

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

建议同学清除浏览器缓存再试一试。祝学习愉快~

0
收起回答
提问者 慕仙0287733 2020-06-28 23:15:59

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Ajax实例_检测用户与注册</title>
   <style>
       *{
           margin: 0;
           padding: 0;
       }
       body{
           background-color: #333333;
       }
       .register{
           width: 300px;
           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: #666666;
           margin-right: 30px;
           cursor: pointer;
       }
       .title span.current{
           color: #ff0000;
       }
       .form div{
           width: 290px;
           height: 30px;
           border-radius: 8px;
           background-color: #ffffff;
           margin-bottom: 25px;
           padding: 8px 10px;
           position: relative;
       }
       .form div span{
           display: inline-block;
           padding-top: 4px;
           padding-right: 3px;
           color: #666666;
       }
       .form div input{
           border: none;
           outline: none;
           font-size: 16px;
           color: #666666;
           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: 22px;
           color: #ff0000;
           padding-left: 2px;
       }
       .button{
           padding-top: 7px;
       }
       .button a{
           display: block;
           width: 100%;
           height: 45px;
           margin: 0 auto;
           line-height: 45px;
           text-align: center;
           text-decoration: none;
           background-color: #f20d0d;
           color: #ffffff;
           border-radius: 30px;
           font-size: 16px;
       }
   </style>
</head>
<body>
<div class="register">
   <p class="title">
       <span>登&nbsp;录</span>
       <span class="current">注&nbsp;册</span>
   </p>
   <div class="form">
       <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 id="pwd_icon"></i>
           <p class="info" id="pwd_info"></p>
       </div>
   </div>
   <p class="button">
       <a href="javascript: void (0)" id="sigup-btn" class="btn">
           注&nbsp;&nbsp;&nbsp;&nbsp;册
       </a>
   </p>
</div>
<script type="text/javascript">
   var $ = {
       ajax: function (options) {
           var xhr = new XMLHttpRequest(); //XMLHttpRequest对象
           var url = options.url; //url地址
           var method = options.method || 'GET'; //传输方式, 默认为get
           var async = typeof options.async === 'undefined' ? true : options.async; //同步或者异步
           var data = options.data || null; //参数
           var params = '';
           var callback = options.success; //ajax请求成功后的回调函数
           var error = options.error; //ajax请求失败后的回调函数
           //将data的对象字面量形式转换成字符串形式
           if(data){
               for (var i in data){
                   params += i + '=' + data[i] + '&';
               }
               params = params.replace(/&$/,'');
           }
           //根据method的值改变URL
           if(method === 'GET'){
               url += '?' + params;
           }
           //创建及发送请求
           xhr.open(method,url,async);
           xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
           xhr.send(params);
           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();
                   }
               }
           }
       }
   };
</script>
<script type="text/javascript">
   var user = document.getElementById('user');
   var pwd = document.getElementById('pwd');
   var sigup = document.getElementById('sigup-btn');
   var userInfo = document.getElementById('user_info');
   var userIcon = document.getElementById('user_icon');
   var pwdInfo = document.getElementById('pwd_info');
   var pwdIcon = document.getElementById('pwd_icon');
   //检测用户
   function checkUser(){
       var userVal = user.value;
       var userReg = /^1[3578]\d{9}$/;
       //验证手机号码是否有效
       if(!userReg.test(userVal)){
           userInfo.innerHTML = '手机号码无效!';
           userIcon.className = 'no';
       }
       else {
           userInfo.innerHTML = '';
           userIcon.className = '';
           //发起请求
           $.ajax({
               url: 'register/server/isUserRepeat.php',
               data:{username: userVal},
               success: function (a) {
                   if(a.code === 1){
                       userIcon.className = 'ok';
                   }
                   else if(a.code === 0){
                       userIcon.className = 'no';
                       userInfo.innerHTML = a.msg;
                   }
                   else{
                       userInfo.innerHTML = '检测失败, 请重试...'
                   }
                   console.log(a)
               }
           })
       }
   }
   //检测密码
   function checkPwd(){
       var pwdVal = pwd.value;
       var pwsReg = /^\w{5,12}$/;
       if(!pwsReg.test(pwdVal)){
           pwdInfo.innerHTML = '请输入5到12位的字母, 数字及下划线';
           pwdIcon.className = 'no';
       }
       else {
           pwdInfo.innerHTML = '';
           pwdIcon.className = '';
       }
   }
   //绑定事件， 检测用户是否注册过
   user.addEventListener('blur',checkUser);
   //绑定事件， 检测密码有效性
   pwd.addEventListener('blur',checkPwd);
</script>
</body>
</html>

1, 第一次打开页面的时候回报错如下（刷新一次后就没该错误了, 请老师解答一下）：

http://img1.sycdn.imooc.com//climg/5ef8b31b097883a319190717.jpg2, 代码中跟路径有关地方, 在我这边的路径如下:

http://img1.sycdn.imooc.com//climg/5ef8b39309810da712560801.jpg3, 输入合法的手机号码打印就是“参数错误”,如下(请老师解答一下)：

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

0
收起回答
好帮手慕夭夭 2020-06-28 18:02:49

同学你好，请把全部代码粘贴到问答区，以便老师准确高效的为你排查问题。另外，第二个问题解答如下：

参数a是接收后端传递过来的数据。也就是我们给后端发送请求，后端会把请求的结果（即数据）放在回调函数的参数中，然后返回给前端（这个是后端做的事情，了解一下即可）。所以前端只要在回调函数中，任意定义一个参数名去接收后端返回的数据即可。

祝学习愉快~

0
收起回答
  • 提问者 慕仙0287733 #1
    由于在这里回复不能上传图片, 所有刚刚在这个问题上面回答了, 请老师看一下，谢谢
    2020-06-28 23:17:35
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

老师，有几个问题
16 0 4
老师。有个问题
1 0 3
我想咨询下，有没QQ群，有问题要提问
0 0 3
可能是我的意思没表达清楚，我的js代码有2个问题，老师一直在我的问题外徘徊。。没有回答主题
70 0 7
老师 想问两个问题
21 0 8

登录后可查看更多问答，登录/注册

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

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

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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