下面将展示后台获取JSON数据代码及效果图
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取后台JSON数据</title> </head> <body> <button>获取服务器数据</button> <h3></h3> <script> var btn=document.getElementsByTagName('button').item(0); var request=new XMLHttpRequest(); btn.addEventListener('click', getData, false); function getData(){ request.addEventListener('readystatechange',show,false); request.open('get','data1.php',true); request.send(null); } function show() { if (request.readyState===4){ console.log(request.responseText); var h3=document.getElementsByTagName('h3').item(0); var obj=JSON.parse(request.responseText); console.log(obj); h3.innerHTML=obj.name+' '+obj.age; } } </script> </body>实例 <?php //print_r($_POST); $email = $_POST['email']; $password = $_POST['password']; $emailList = ['admin@php.cn', 'admin@html.cn', 'admin@py.cn']; $pwd = md5('123456'); if (!in_array($email, $emailList)) { echo json_encode(['status'=>1,'message'=>'邮箱不正确']); } else if (md5($password) !== $pwd) { echo json_encode(['status'=>2,'message'=>'密码不正确']); } else { echo json_encode(['status'=>3,'message'=>'验证通过']); } 运行实例 » 点击 "运行实例" 按钮查看在线实例 </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
下面将展示表单验证传输JSON数据代码及效果图
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax表单验证</title> </head> <body> <h3>用户登录</h3> <form name="login" method="post" onsubmit="return false"> <p> <label for="email">邮箱:</label> <input type="email" id="email" name="email" 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(){ var user= isEmpty(login,error_email,error_psw); return user ? verfiy(user,result) : false; } function isEmpty(form,error1,error2){ var email=form.email.value.trim(); var password=form.password.value.trim(); if(email.length===0){ error1.innerText='邮箱不能为空'; form.email.focus(); return false; }else if(password.length===0){ error2.innerText='密码不能为空'; form.password.focus(); return false; } return { email:email, password:password } } function verfiy(user,result){ var request = new XMLHttpRequest(); // 2. 监听请求变化 request.onreadystatechange = function(){ if (request.readyState === 4) { // 准备就绪 console.log(request.responseText); // 设置验证提示 result.innerHTML = request.responseText; /***********************************************/ // 根据返回的状态值确定要显示的提示内容 var obj = JSON.parse(request.responseText); console.log(obj); 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; } /***********************************************/ // 验证通过的跳转功能, 需要使用JSON来实现 } return false; }; // 如果是POST请求, 3-4步会发生变化 // 3. 初始化请求 request.open('post', 'data2.php', true); // 4. 设置请求头 request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 5. 发送请求 var data='email='+user.email+'&password='+user.password; request.send(data); } login.email.addEventListener('input', function (){ error_email.innerText = ''; // 清除邮箱错误提示 result.innerText = ''; // 清除服务器返回的验证提示 }, false); login.password.addEventListener('input', function (){ error_psw.innerText = ''; // 清除密码错误提示 result.innerText = ''; // 清除服务器返回的验证提示 }, false); </script> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
实例
<?php //print_r($_POST); $email = $_POST['email']; $password = $_POST['password']; $emailList = ['admin@php.cn', 'admin@html.cn', 'admin@py.cn']; $pwd = md5('123456'); if (!in_array($email, $emailList)) { echo json_encode(['status'=>1,'message'=>'邮箱不正确']); } else if (md5($password) !== $pwd) { echo json_encode(['status'=>2,'message'=>'密码不正确']); } else { echo json_encode(['status'=>3,'message'=>'验证通过']); }
运行实例 »点击 "运行实例" 按钮查看在线实例
本次学习到JSON的一些获取数据的方法
JSON.parsa();转换成对象
json_encode 返回数组数据