![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：可能现在大家对于这种前后端的数据交互理解的还不够深刻 ,随着学习的深入, 会体会的更多
Collection
Collection
JSON: JSON是一种使用JS对象字面量语法书写的格式化文档.
支持的数据类型: 6种:Number, String, Boolean, Array, Object, Null
数字: 整数或浮点数
字符串: 在双引号中
逻辑值: true / false
数组字面量: [e1,e2,e3,...]
对象字百量: {x:1, y:2,...}
无值: null
JS处理JSON的二个常用函数:
JSON.parse(jsonStr): 将JSON格式字符串转换为js对象
JSON.stringift(obj): 将js对象转换为JSON格式字符串
表单验证：前段处理从服务器返回单JSON数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证：前段处理从服务器返回单JSON数据</title>
</head>
<body>
<h2>用户登录</h2>
<form action="" name="login">
<p>
<label for="username">用户：</label>
<input type="text" name="username" id="username" placeholder="UserName">
</p>
<p>
<label for="email">邮箱：</label>
<input type="text" id="email" name="email" placeholder="example@email.com">
</p>
<p>
<label for="password">密码:</label>
<input type="text" id="password" name="password" placeholder="******">
</p>
<p>
<label for="remember">记住我：</label>
<select name="remember" id="remember">
<option value="1" selected>一天</option>
<option value="7">一周</option>
<option value="30">一月</option>
</select>
</p>
<p>
<button type="button" name="submit">提交</button>
</p>
</form>
<script>
var login = document.forms.namedItem('login');
var btn = login.submit;
var request = new XMLHttpRequest();
login.username.addEventListener('blur',isEmpty,false);
login.email.addEventListener('blur',isEmpty,false);
login.password.addEventListener('blur',isEmpty,false);
function isEmpty(ev) {
if (ev.target.value.length === 0) {
if (ev.target.nextElementSibling === null) {
var tips = document.createElement('span');
tips.style.color = 'red';
switch (ev.target.name) {
case 'username':
tips.innerText = '用户名不能为空';
break;
case 'email':
tips.innerText = '邮箱不能为空';
break;
case 'password':
tips.innerText = '密码不能为空';
break;
default:
tips.innerText = '未定义错误';
}
ev.target.parentNode.appendChild(tips);
ev.target.focus();
}
}
login.username.addEventListener('input', clearTips, false);
login.email.addEventListener('input', clearTips, false);
login.password.addEventListener('input', clearTips, false);
function clearTips(ev) {
var tips = ev.target.nextElementSibling;
if (tip !== null) {
tips.parentNode.removeChild(tips);
}
}
btn.addEventListener('click', check, false);
function check(ev) {
var username = login.username.value;
var email = login.email.value;
var password = login.password.value;
var remember = login.remember.value;
if (username.length === 0 || email.length === 0 || password.length === 0) {
ev.target.removeEventListener('click', check, false);
var blurEvent = new Event('blur');
login.username.dispatchEvent(blurEvent);
return false;
}
var data = 'username=' + username + '&email=' + email + '&password=' + password + '&remember=' + remember;
request.addEventListener('readystatechange', successCallback, false);
request.open('POST', 'php/check1.php', true);
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=utf-8');
request.send(data);
}
function successCallback(ev) {
if (request.readyState === 4) {
var obj = JSON.parse(request.responseText);
var tips = document.createElement('span');
var url = '';
switch (obj.status) {
case 1:
tips.style.color = 'green';
tips.innerText = obj.message + ',正在跳转...';
url = 'php/admin.php';
break;
case 0:
tips.style.color = 'red';
tips.innerText = obj.message;
url = 'demo1.html'; // 也可以重新加载本页面
break;
default:
console.log('未知错误');
break;
}
btn.parentNode.appendChild(tips);
setTimeout(function () {
location.href = url;
}, 3000);
}
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
如何从前端发送的JSON数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何从前端发送的JSON数据</title>
</head>
<body>
<h2>用户登录</h2>
<form action="" name="login">
<p>
<label for="username">用户：</label>
<input type="text" name="username" id="username" placeholder="UserName">
</p>
<p>
<label for="email">邮箱：</label>
<input type="text" id="email" name="email" placeholder="example@email.com">
</p>
<p>
<label for="password">密码:</label>
<input type="text" id="password" name="password" placeholder="******">
</p>
<p>
<label for="remember">记住我：</label>
<select name="remember" id="remember">
<option value="1" selected>一天</option>
<option value="7">一周</option>
<option value="30">一月</option>
</select>
</p>
<p>
<button type="button" name="submit">提交</button>
</p>
</form>
<script>
var login = document.forms.namedItem('login');
var btn = login.submit;
var request = new XMLHttpRequest();
login.username.addEventListener('blur',isEmpty,false);
login.email.addEventListener('blur',isEmpty,false);
login.password.addEventListener('blur',isEmpty,false);
function isEmpty(ev) {
if (ev.target.value.length === 0) {
if (ev.target.nextElementSibling === null) {
var tips = document.createElement('span');
tips.style.color = 'red';
switch (ev.target.name) {
case 'username':
tips.innerText = '用户名不能为空';
break;
case 'email':
tips.innerText = '邮箱不能为空';
break;
case 'password':
tips.innerText = '密码不能为空';
break;
default:
tips.innerText = '未定义错误';
}
ev.target.parentNode.appendChild(tips);
ev.target.focus();
}
}
login.username.addEventListener('input', clearTips, false);
login.email.addEventListener('input', clearTips, false);
login.password.addEventListener('input', clearTips, false);
function clearTips(ev) {
var tips = ev.target.nextElementSibling;
if (tip !== null) {
tips.parentNode.removeChild(tips);
}
}
btn.addEventListener('click', check, false);
function check(ev) {
var username = login.username.value;
var email = login.email.value;
var password = login.password.value;
var remember = login.remember.value;
if (username.length === 0 || email.length === 0 || password.length === 0) {
ev.target.removeEventListener('click', check, false);
var blurEvent = new Event('blur');
login.username.dispatchEvent(blurEvent);
return false;
}
var obj = {
username: username,
email: email,
password: password,
remember: remember
};
var data = JSON.stringify(obj);
request.addEventListener('readystatechange', successCallback, false);
request.open('POST', 'php/check2.php', true);
request.setRequestHeader('content-type', 'application/json;charset=utf-8');
request.send(data);
}
function successCallback(ev) {
if (request.readyState === 4) {
var obj = JSON.parse(request.responseText);
var tips = document.createElement('span');
var url = '';
switch (obj.status) {
case 1:
tips.style.color = 'green';
tips.innerText = obj.message + ',正在跳转...';
url = 'php/admin.php';
break;
case 0:
tips.style.color = 'red';
tips.innerText = obj.message;
url = 'demo1.html';
break;
default:
console.log('未知错误');
break;
}
btn.parentNode.appendChild(tips);
setTimeout(function () {
location.href = url;
}, 3000);
}
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例