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>
运行实例 »
点击 "运行实例" 按钮查看在线实例