php自动form data请求,前端交互的表单验证知识及案例与FormData（）简化Ajax请求——2019年7月17日23时23分...

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数据：

前后端交互案例：

实例

html>

Ajax-POST

用户登陆

用户名：

邮箱：

密码：

一天

七天

登陆

//获取相关变量

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);

}

}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图：

FormData简化Ajax请求实例

演示案例：

实例

html>

FormData序列化表单数据

用户登陆

用户名：

邮箱：

密码：

一天

七天

登陆

//获取相关变量

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);

}

}

运行实例 »

点击 "运行实例" 按钮查看在线实例