博客列表 >后台获取数据及验证表单-2019年5月16日20点00分

后台获取数据及验证表单-2019年5月16日20点00分

小李广花荣
小李广花荣原创
2019年05月24日 17:25:48826浏览
  1. 下面将展示后台获取JSON数据代码及效果图


  2. 实例

    <!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>

    运行实例 »

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

  3. 实例

    <?php
    
    $porson='{
    "name":"user",
    "age":20,
    "sex":"nan"
    }';
    
    echo $porson;

    运行实例 »

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

    QQ图片20190524172014.png
  4. 下面将展示表单验证传输JSON数据代码及效果图



  5. 实例

    <!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>

    运行实例 »

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

  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 json_encode(['status'=>1,'message'=>'邮箱不正确']);
    
    } else if (md5($password) !== $pwd) {
        echo json_encode(['status'=>2,'message'=>'密码不正确']);
    } else {
        echo json_encode(['status'=>3,'message'=>'验证通过']);
    
    }

    运行实例 »

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

    QQ图片20190524171931.png
  7. 本次学习到JSON的一些获取数据的方法 

    JSON.parsa();转换成对象

    json_encode 返回数组数据

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议