博主信息
博文 45
粉丝 0
评论 1
访问量 40663
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
异步方式验证表单数据,以JSON格式字符串返回到前端
源逸
原创
1147人浏览过
  1. 服务器以JSON格式字符串返回数据到前端进行校验,使用到:JSON.parse(),把JSON格式字符转为js对象来使用

  2. 服务器使用JSON_encode(),把php的数组转为JSON格式字符串

  3. 根据用户输入的数据,服务器预先设置好的数组,在前端根据状态值进行校验判断:switch

  4. 把服务器上的JSON格式字符串转为js对象使用:JSON.parse()


  5. 实例

    <!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源码:


  6. 实例

    <?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'=>'验证通过正在跳转']);
    
    }

    运行实例 »

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

    效果图:

    5.jpg

批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学