![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
1、将JS对象序列化为JSON字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>将JS对象序列化为JSON字符串</title>
</head>
<body>
<script>
// 1.JS对象
var user = {
id: 1,
username: 'admin',
password: '123456',
age: 24
};
// 序列化为JSON字符串
var json1 = JSON.stringify(user);
console.log(json1);
console.log(typeof json1);
// 2. js数组
var arr1 = ['瞎子', '压缩', '小提莫'];
var json2 = JSON.stringify(arr1);
console.log(json2);
// 3. 数组中也可以有对象等复合类型
var attr3 = [
{"name": "德玛西亚之力", "skill": "大宝剑"},
{"name": "厄运小姐", "skill": "枪林弹雨"},
{"name": "盲僧", "skill": "一库"},
{"name": "快乐风男", "skill": "痛里呀尅通"}
];
var json3 = JSON.stringify(attr3);
console.log(json3);
console.log(typeof json3);
// 4.JSON.parse(),还可以将它还原成js对象
var obj = JSON.parse(json3);
console.log(obj);
console.log(typeof obj);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、使用JSON验证表单数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用JSON验证表单数据</title>
</head>
<body>
<h3>用户登录</h3>
<form name="login" method="post" onsubmit="return false">
<p>
<label for="username">账号:</label>
<input type="email" id="username" name="username" placeholder="example@gmail.com">
<span style="color: red" id="error_email">*</span>
</p>
<p>
<label for="password">密码: </label>
<input type="password" id="password" name="password" placeholder="密码不少于6位">
<span style="color: red" id="error_psw">*</span>
</p>
<p>
<button id="submit" type="button">登录</button>
<span id="result"></span>
</p>
</form>
<script>
// 获取必要的元素,以及提示信息的占位符元素
var login = document.forms.namedItem('login');
var submit = document.getElementById('submit');
var error_email = document.getElementById('error_email');
var error_psw = document.getElementById('error_psw');
var result = document.getElementById('result');
// 为提交按钮设置点击事件, 并分配一个事件响应函数(只需要名称即可)
submit.addEventListener('click', checkUser, false);
// 主函数: 定义提交事件函数, 内部会调用二个子函数,完成主要功能
function checkUser() {
// 1.数据非空验证
var user = isEmpty(login, error_email, error_psw);
// 2. Ajax异步验证
// 如果非空验证返回false,说明验证失败, 就不必再到服务器进行Ajax验证了, 直接返回false
// 否则就将需要验证的数据(对象字面量user)做为参数,调用异步验证器: verfiy()
return user ? verfiy(user, result) : false;
}
// 非空验证函数
function isEmpty(form, error1, error2) {
// 获取表单控件中的内容,并清空前后空格
var username = form.username.value.trim();
var password = form.password.value.trim();
// 先验证邮箱,再验证密码,并正确的设置焦点与返回值
if (username.length === 0) {
error1.innerText = '账号不能为空';
login.username.focus();
return false;
} else if (password.length === 0){
error2.innerText = '密码不能为空';
login.password.focus();
return false;
}
// 非空验证通过, 则返回账号与密码组成的对象字面量,方便后续代码调用
return {
username: username,
password: password
}
}
function verfiy(user, result) {
//1.创建request对象
var request = new XMLHttpRequest();
//2.监听响应状态
request.onreadystatechange = function(){
if (request.readyState === 4) { // 准备就绪
// console.log(request.responseText);
// 设置验证提示
result.innerHTML = request.responseText;
// 验证通过的跳转功能, 需要使用JSON来实现
// 根据返回的状态值确定要显示的提示内容
var obj = JSON.parse(request.responseText);
switch (obj.status) {
case 1:
result.style.color = 'red';
result.innerHTML = obj.message;
break;
case 2:
result.style.color = 'red';
result.innerHTML = obj.message;
break;
case 3:
result.style.color = 'green';
result.innerHTML = obj.message;
break;
}
}
return false;
};
//3.设置请求参数
request.open('post','admin/check2.php',true);
//4. 设置头信息,将内容类型设置为表单提交方式(固定模板语法结构)
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//4.发送请求
// 准备要提交的数据
// 不再使用字符串拼装键值对的方式组装数据
// var data = 'username=' + user.username + '&password=' + user.password;
// 创建一个JS对象来封装要提交的需要验证的前端数据；
var obj = {
username: user.username,
password: user.password
};
// console.log(obj);
// 将JS对象转化为JSON字符串
var data = 'user=' + JSON.stringify(obj);
console.log(typeof data);
request.send(data);
}
// input: 当用户修改错误数据时, 提示信息应该消失
login.username.addEventListener('input', function (){
error_email.innerText = ''; // 清除账号错误提示
result.innerText = ''; // 清除服务器返回的验证提示
}, false);
login.password.addEventListener('input', function (){
error_psw.innerText = ''; // 清除密码错误提示
result.innerText = ''; // 清除服务器返回的验证提示
}, false);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<?php
$user = $_POST['user'];
// 咱们以将期转换为数组为例进行演示
$arr = json_decode($user, true);
$email = $arr['username'];
$password = $arr['password'];
$emailList = ['admin@php.cn', 'admin@html.cn', 'admin@qq.com'];
$pwd = md5('123456');
if (!in_array($email, $emailList)) {
// json_encode: 将php数组或数组转为json格式字符串
echo json_encode(['status'=>1, 'message'=>'邮箱不正确']);
} else if (md5($password) !== $pwd) {
echo json_encode(['status'=>2, 'message'=>'密码不正确']);
} else {
echo json_encode(['status'=>3, 'message'=>'验证通过正在跳转']);
}点击 "运行实例" 按钮查看在线实例
3、对JS对象JSON序列化时进行过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对JS对象JSON序列化时进行过滤</title>
</head>
<body>
<script>
var staff = {
id: 'YYY01',
name: '德玛西亚之力',
salary: 888,
isMarried: true
};
var jsonStr1 = JSON.stringify(staff);
console.log(jsonStr1);
// 仅允许序列化: id, name 二个字段,其它不输出
var jsonStr2 = JSON.stringify(staff, ['id', 'name']);
console.log(jsonStr2);
// 可以使用回调参数, 即函数,来实现同样的功能
// 将不允许序列化的字段,返回 undefined 即可
var jsonStr3 = JSON.stringify(staff, function (key, value) {
switch (key) {
case 'salary':
return undefined;
case 'isMarried':
return undefined;
default:
return value;
}
});
console.log(jsonStr3);
var name = '疾风剑豪';
var jsonStr4 = JSON.stringify(staff, function (key, value) {
switch (key) {
case 'salary':
if (name === 'admin') {
return value;
}
return '无权查看';
case 'isMarried':
return undefined;
default:
return value;
}
});
console.log(jsonStr4);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4、将JSON字符串还原为JS对象时进行过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将JSON字符串还原为JS对象时进行过滤</title>
</head>
<body>
<script>
var jsonStr = '{"id": "YYY01","name": "暗夜猎手", "salary": 888,"isMarried": true}';
var staff1 = JSON.parse(jsonStr);
console.log(staff1);
// 遍历
Object.keys(staff1).forEach(function (value) {
console.log(staff1[value]);
});
var staff2 = JSON.parse(jsonStr, function (key, value) {
return value;
});
console.log(staff2);
var staff3 = JSON.parse(jsonStr, function (key, value) {
if (key === 'salary'){
return undefined;
}
return value;
});
console.log(staff3);
// 注意: JSON.parse() 与 JSON.stringify()不同, 第二个参数不支持数组,只支持回调函数
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例