跟着视频敲，但是报错了
index.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" type="text/css" href="css/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="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">
<a href="javascript:void(0)" id="signup-btn" class="btn">注 册</a>
</p>
</div>
</div>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
var user = document.getElementById("user"),
pwd = document.getElementById("pwd"),
signup = document.getElementById("signup-btn"),
userInfo = document.getElementById("user_info"),
userIcon = document.getElementById("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/demo/register/isUserRepeat.php",
method: "post",
async: true,
data: {"username":"userVal"},
success: function(data) {
userIcon.className = "ok";
// console.log(data);
}
});
}
}
//检测用户
user.addEventListener("blur", checkUser, false);
</script>
</body>
</html>
ajax.js
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,
data = options.data || null,
params = "", //参数
callback = options.success; //ajax请求成功的回调函数
error=options.error;
//将data的对象字面量的形式转换为字符串形式
if (data) {
for (var i in data) {
params += i + "=" + data[i] + "&";
}
params = params.replace(/&$/, "");
}
//根据method的值，改变url
if (method === "get") {
url += "?" + params;
}
if (typeof XMLHttpRequest != "undefined") {
xhr = new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
//将所有可能出现的ActiveXObject版本放在一个数组中
var xhrArr = [
"Microsoft.XMLHTTP",
"MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP.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);
}
};
// $.ajax({
// url: "", //必须
// method: "post",
// async: true,
// data: {},
// success: function() {},
// error:function(){}
// });
isUserRepeat.php
<?php
header('Content-Type:application/json');
$isUsername = array_key_exists('username',$_REQUEST);
$username = $isUsername ? $_REQUEST['username'] : '';
if(!$username){
$msg = printMsg('参数有误',2);
echo json_encode($msg,true);
exit();
}
function printMsg($msg,$code){
return array('msg'=>$msg,'code'=>$code);
}
// 记录存储用户的文件路径
$fileStr = __DIR__.'/user.json';
// 读取现存的用户名和密码
$fileStream = fopen($fileStr,'r');
$fileContent = fread($fileStream,filesize($fileStr));
$fileContent_array = $fileContent ? json_decode($fileContent,true) : array();
fclose($fileStream);
// 判断用户名是否有重复的
$isrepeat = false;
foreach($fileContent_array as $key=>$val){
if($val['username'] === $username){
$isrepeat = true;
break;
}
}
if($isrepeat){
$msg = printMsg('用户名重复',0);
echo json_encode($msg,true);
exit();
}
$msg = printMsg('用户名可用',1);
echo json_encode($msg,true);
?>
style.css
*{
margin: 0;
padding: 0;
}
body{
background-color: #333;
}
.register{
width: 300px;
height: 270px;
margin: 80px auto;
padding:15px 30px;
background-color: #eee;
border-radius: 5px;
}
.title{
height: 35px;
}
.title span{
font-size: 16px;
font-weight: bold;
color:#666;
margin-left: 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;
padding-right: 3px;
color:#666;
}
.form div input{
border:none;
outline: none;
padding-top: 8px;
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: 12px;
color:#f00;
padding-left: 2px;
}
.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;
}
报错：VM570:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.xhr.onreadystatechange (ajax.js:52)9
收起
正在回答 回答被采纳积分+1
2回答
相似问题
npm run serve会出现这个错
43
0
4
跟着视频一步一步做的，却无法运行helloworld
15
0
4
为什么我跟着老师全部删除之后只是报错，页面还是有内容
22
0
3
老师，报错了
24
0
5
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星