![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
下面将展示后台获取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 返回数组数据
