出了什么问题?

出了什么问题?

//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地址写错吗?还是其他什么原因?

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

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

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

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

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

这几张图是我放在wampserver的www目录的位置

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

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

4回答
樱桃小胖子 2019-05-08 14:15:32

1、在myajax文件规定的是get请求方式

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

因此在js中需要修改如下:

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

希望可以帮到你!

好帮手慕糖 2019-05-07 19:15:11

同学你好,你这个文件是修改之后的吗?是又进行了修改了吗,建议:使用这个粘贴的代码测试哦。

或者可以使用下源码中的ajax看是否会报错哦。

祝学习愉快!

  • 提问者 soso_crazy #1
    采用下载的源码尝试也是有同样的问题:VM21:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.xhr.onreadystatechange (ajax.js:44)
    2019-05-07 19:19:08
好帮手慕糖 2019-05-07 18:36:50

同学你好,单词拼写错误,如下,应该是form哦,

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

希望能帮助到你,欢迎采纳。

祝学习愉快!

  • 提问者 soso_crazy #1
    我改了头部信息form之后还是出现问题: Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.XHR.onreadystatechange (myajax.js:52) XHR.onreadystatechange @ myajax.js:52 XMLHttpRequest.send (async) ajax @ myajax.js:64 checkUser @ 表单验证.html:71
    2019-05-07 18:59:49
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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