1. 写一个前端交互的表单验证案例,前后端都要使用json数据格式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax表单验证:如何从前端发送的JSON数据</title>
</head>
<body>
<!-- 登录表单 -->
<h2>用户登录1</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" name="email" id="email" placeholder="example@email***">
</p>
<p>
<label for="password">密码:</label>
<input type="password" name="password" id="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>
<!----------- JavaScript 脚本 -------------->
<script>
// 1. 获取相关变量
// 获取表单元素
var login = document.forms.namedItem('login');
// 获取提交按钮
var btn = login.submit;
// 创建Ajax请求对象
var request = new XMLHttpRequest();
/******************************************************/
// 2. 表单元素内容非空验证: 控件失去焦点时触发
login.username.addEventListener('blur', isEmpty, false);
login.email.addEventListener('blur', isEmpty, false);
login.password.addEventListener('blur', isEmpty, false);
// 失去焦点的事件方法
function isEmpty(ev) {
// ev.target: 正在触发事件的元素,当前是<input>
// 如果用户没有输入内容,则创建提示元素,并提示用户
if (ev.target.value.length === 0) {
// 1.创建非空验证的提示信息
if (ev.target.nextElementSibling === null) {
// 创建提示元素<span>
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();
}
}
/******************************************************/
// 3.用户输入内容时,为控件的input事件添加监听器
login.username.addEventListener('input', clearTips, false);
login.email.addEventListener('input', clearTips, false);
login.password.addEventListener('input', clearTips, false);
// input事件监听方法
function clearTips(ev) {
// 判断当前控件是否有提示信息元素?
var tips = ev.target.nextElementSibling;
if (tips !== null) {
// 移除提示信息元素<span>
tips.parentNode.removeChild(tips);
}
}
/******************************************************/
// 4. Ajax异步验证
btn.addEventListener('click', check, false);
// click事件监听方法
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);
// 模拟第一个输入框的blur事件,等待用户输入数据
var blurEvent = new Event('blur');
login.username.dispatchEvent(blurEvent);
return false;
}
/*
*** // 第一种： 以表单键值对方式封装需要发送的数据
var data = 'username='+username+'&email='+email+'&password='+password+'&remember='+remember;
*/
/* 第二种： 表单数据 转换为JSON 字符串 */
// 以表单数据封装成JS对象，再转为JSON字符串
var obj = {
username: username,
email: email,
password: password,
remember: remember
};
// data 中保存着json格式的表单数据
var data = JSON.stringify(obj);
// 监听事件回调
request.addEventListener('readystatechange', successCallback, false);
// 配置请求参数
request.open('POST', 'php/check2.php', true);
/*
* 第一种：以表单格式发送数据
// 关键步骤: POST请求, 需要设置设置请求头: 以表单数据格式发送数据
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=utf-8');
*/
/* 第二种：以 json 格式发送数据 */
// POST请求，需要设置请求头：以表单数据格式发送数据
request.setRequestHeader('content-type','application/json;charset=utf-8');
// 发送请求
request.send(data);
}
// Ajax请求成功的回调
function successCallback(ev) {
// 事件目标对象就是XHR,可以清楚的看到readyStae四种状态,等于4成表示请求成功
// console.log(ev.target);
if (request.readyState === 4) {
// 将服务器响应返回的JSON字符串解析为JS对象
var obj = JSON.parse(request.responseText);
// 创建提示信息元素
var tips = document.createElement('span');
// 根据结果设置需要跳转的页面
var url = '';
// 根据obj.status值,判断需要执行的操作
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 = 'demo2.html'; // 也可以重新加载本页面
break;
// 出错返回
default:
console.log('未知错误');
break;
}
// 将验证信息元素添加到按钮旁边
btn.parentNode.appendChild(tips);
// 默认3秒后执行预定义的页面跳转操作
setTimeout(function () {
location.href = url;
}, 3000);
}
}
</script>
</body>2. 使用FormData()序列化表单数据, 来简化Ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax表单验证:表单序列化与FormData对象</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" name="email" id="email" placeholder="molang@qq***">
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password" placeholder="123456">
</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>
// 1.获取相关变量
// 获取表单元素
var login = document.forms.namedItem('login');
// 获取提交按钮
var btn = login.submit;
// 创建Ajax请求对象
var request = new XMLHttpRequest();
/*****************************************************/
// 2.表单元素内容非空验证：控件失去焦点时触发
login.username.addEventListener('blur',isEmpty,false);
login.email.addEventListener('blur',isEmpty,false);
login.password.addEventListener('blur',isEmpty,false);
// 失去焦点的事件方法
function isEmpty(ev) {
// ev.target:正在触发事件的元素，当前是<input>
//如果用户没有输入内容，则创建提示元素，并提示用户
if (ev.target.value.length === 0){
// 1.创建非空验证的提示信息
if (ev.target.nextElementSibling === null){
// 创建提示元素<span>
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();
}
}
/*********************************************************/
// 3.用户输入内容时，为控件的input事件添加监听器
login.username.addEventListener('input',clearTips,false);
login.email.addEventListener('input',clearTips,false);
login.password.addEventListener('input',clearTips,false);
// input 事件监听方法
function clearTips(ev) {
// 判断当前控件是否有提示信息元素
var tips = ev.target.nextElementSibling;
if (tips != null){
// 移除提示信息元素<span>
tips.parentNode.removeChild(tips);
}
}
/*********************************************************/
// 4.Ajax异步验证
btn.addEventListener('click',check,false);
// click 事件监听方法
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);
// 模拟第一个输入框的blur事件，等待用户输入数据
var blurEvent = new Event('blur');
login.username.dispatchEvent(blurEvent);
return false;
}
// 监听事件回调
request.addEventListener('readystatechange',successCallback,false);
// 配置请求参数
request.open('POST','php/check1.php',true);
// 关键步骤：POST请求，需要设置请求头，以表单数据格式发送数据
//request.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=utf-8');
/*
* 第一种：
// 以表单键值对方式封装需要发送的数据
var data = 'username='+username+'&email='+email+'&password='+password+'&remember='+remember;
*/
/* FormData() 序列化表单数据 */
// FormData 不需要设置请求头：可以自动识别
// 发送请求：只需要传送一个FormData() 对象即可，用表单来初始化
var data = new FormData(login);
// 发送请求
request.send(data);
}
// Ajax请求成功的回调
function successCallback(ev) {
// 事件目标对象就是XHR，可以清楚的看到readyState四种状态，等于4表示请求成功
// console.log(ev.target)
if (request.readyState === 4){
// 将服务器响应返回的JSON字符串解析为js对象
var obj = JSON.parse(request.responseText);
// 创建提示信息元素
var tips = document.createElement('span');
// 创建结果设置需要跳转的页面
var url = '';
// 根据obj.status值，判断需要执行的操作
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 = '71703.html'; // 也可以重新加载本页面
break;
// 出错返回
default:
console.log('未知错误！');
break;
}
// 将验证信息元素添加到按钮旁边
btn.parentNode.appendChild(tips);
// 默认3秒后执行预定义的页面跳转操作
setTimeout(function () {
location.href = url;
},3000);
}
}
</script>
</body>
</html>