异步方式验证表单数据，以JSON格式字符串返回到前端

服务器以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'=>'验证通过正在跳转']);

}

运行实例 »

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

效果图：

实例

实例

相关文章