![[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.parse(): 将JSON格式字符串转为JS对象；
JSON.stringify(): 将JS对象转为JSON格式字符串；
不允许注释，支持数据类型：Number String Boolean Array Object Null
从前端发送JSON数据：注意要修改POST请求头
前端处理从服务器返回的JSON数据：request.setRequestHeader('content-type','application/json;charset=utf-8');
FormData() 演示：var data = new FormData(form表单name属性值);
简化Ajax请求，POST可以去掉请求头，用表单数据初始化FormData表单对象，会自动忽略disabled和按钮的表单数据
前端处理从服务器返回的JSON数据
从前端发送JSON数据：
前后端交互案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax-POST</title>
</head>
<body>
<h2>用户登陆</h2>
<form action="" name="login">
<p>
<label for="username" >用户名：</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="email" >邮箱：</label>
<input type="text" name="email" id="email">
</p>
<p>
<label for="password" >密码：</label>
<input type="password" name="password" id="password">
</p>
<p>
<label for="remember"></label>
<select name="remember" id="remember">
<option value="1">一天</option>
<option value="7">七天</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');
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 (tips !== null){
tips.parentNode.removeChild(tips);
}
}
//Ajax异步验证
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);
console.log(data);
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){
// console.log(request.responseText);
var obj = JSON.parse(request.responseText);
var tips = document.createElement('span');
var url = '';
switch (obj.status) {
case 1:
tips.innerText = obj.message + '正在跳转中';
url = 'php/admin.php';
break;
case 0:
tips.innerText = obj.message;
break;
default:
tips.innerText = '未知错误';
break;
}
btn.parentNode.appendChild(tips);
setTimeout(function () {
location.href = url;
},3000);
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
效果图：
FormData简化Ajax请求实例
演示案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FormData序列化表单数据</title>
</head>
<body>
<h2>用户登陆</h2>
<form action="" name="login">
<p>
<label for="username" >用户名：</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="email" >邮箱：</label>
<input type="text" name="email" id="email">
</p>
<p>
<label for="password" >密码：</label>
<input type="password" name="password" id="password">
</p>
<p>
<label for="remember"></label>
<select name="remember" id="remember">
<option value="1">一天</option>
<option value="7">七天</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');
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 (tips !== null){
tips.parentNode.removeChild(tips);
}
}
//Ajax异步验证
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 = JSON.stringify(obj);
// console.log(data);
request.addEventListener('readystatechange',successCallback,false);
request.open('POST','php/check1.php',true);
request.send(new FormData(login));
}
function successCallback(ev) {
if(request.readyState ===4){
// console.log(request.responseText);
var obj = JSON.parse(request.responseText);
var tips = document.createElement('span');
var url = '';
switch (obj.status) {
case 1:
tips.innerText = obj.message + '正在跳转中';
url = 'php/admin.php';
break;
case 0:
tips.innerText = obj.message;
break;
default:
tips.innerText = '未知错误';
break;
}
btn.parentNode.appendChild(tips);
setTimeout(function () {
location.href = url;
},3000);
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例