search

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

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

小李广花荣
小李广花荣原创
2019年05月24日 17:25:48828浏览

  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 返回数组数据

上一条：作业-2019-05-22下一条：NodeJS、NPM安装配置步骤(windows版本)
获取数据
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多