![[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格式字符串返回数据到前端进行校验，使用到：JSON.parse()，把JSON格式字符转为js对象来使用
服务器使用JSON_encode(),把php的数组转为JSON格式字符串
根据用户输入的数据，服务器预先设置好的数组，在前端根据状态值进行校验判断:switch
把服务器上的JSON格式字符串转为js对象使用：JSON.parse()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>以异步方式获取服务器返回的JSON格式字符串数据渲染到页面(2019.05.16示例)</title>
</head>
<body>
<button>获取数据</button>
<h3></h3>
<script>
var but = document.getElementsByTagName('button').item(0);
var request = new XMLHttpRequest();
but.addEventListener('click',show,false);
function show() {
//添加事件监听函数:readystatechange
request.addEventListener('readystatechange',getData,false);
request.open('get','admin/demo1.php',true);
request.send(null);
}
function getData() {
if(request.readyState === 4){
var h3 = document.getElementsByTagName('h3').item(0);
//将服务器返回的JSON格式字符串转为:js对象来使用,JSON_parse()
var obj = JSON.parse(request.responseText);
console.log(obj);
h3.innerHTML = obj.name + ',PHP的成绩是：' + obj.grade.php;
}
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
PHP源码：
<?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 '<span style="color: red">邮箱不正确</span>';
// 从服务器返回json格式的数据,其实就是一个字符串,默认必须是UTF8编码
// json_encode: 将php数组或数组转为json格式字符串
echo json_encode(['status'=>1, 'message'=>'邮箱不正确']);
} else if (md5($password) !== $pwd) {
// echo '<span style="color: red">密码不正确</span>';
echo json_encode(['status'=>2, 'message'=>'密码不正确']);
} else {
// echo '<span style="color: green">验证通过,正在跳转...</span>';
echo json_encode(['status'=>3, 'message'=>'验证通过正在跳转']);
}点击 "运行实例" 按钮查看在线实例
效果图：
