search

博客列表 >Ajax - GET和POST数据请求实例讲解-2019年07月16日 23时10分

Ajax - GET和POST数据请求实例讲解-2019年07月16日 23时10分

高明博客
高明博客原创
2019年07月21日 13:03:37737浏览

一、Ajax-GET 请求获取数据-学生成绩查询系统

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax-GET 请求获取数据-学生成绩查询系统</title>
</head>

<body>

    <h2>学生成绩查询系统</h2>
    请输入您的学号：<input type="text" id="xueid" name="xueid" autofocus>
    <p id="tishi"></p>
    <!--<p id="tishi"><span style="color: red">001</span>，张军，您好！2019年第一学期成绩： 数学：65分  语文：75</p>-->

<script>
     //定义获取学号id
     var input = document.getElementById('xueid');

     //定义获取提示
     var tishi = document.getElementById('tishi');

     //定义Ajax对象
     var request = new XMLHttpRequest();

     input.addEventListener('keypress',getUserInfo,false);
      
     function getUserInfo(ev) {
         if(ev.key === 'Enter'){
             //根据用户输入数据进行判断
            switch (true){

                //如果输入内容为空判断
                case  input.value.length === 0:
                      tishi.innerHTML = '<span style="color:red">学号不能为空</span>';
                return false;

                //输入内容必须为整数
                case  isNaN(input.value):
                    tishi.innerHTML = '<span style="color:red">学号必须是整数</span>';
                    return false;

                default:
                    // 监听成功回调
                    request.addEventListener('readystatechange',successCallback,false);

                    //配置参数
                    var data = encodeURIComponent(input.value);
                    request.open('GET','php/xue.php?xueid='+data,true);
                    //发送请求
                    request.send(null);
            }
         }
     }

     //成功回调
    function  successCallback() {
        // 当Ajax对象的readyState状态属性变更为4时, 表示请求成功并返回了数据
         if(request.readyState === 4){
             //获取页面元素，并将数据渲染到DOM元素中
             // console.log(request.responseText);
             tishi.innerHTML = request.responseText;
         }
        
    }
     



</script>



</body>
</html>

运行实例 »

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


xue.php后台PHP代码：

实例

<?php

$xueId = isset($_GET['xueid']) ? $_GET['xueid'] : null;

$userInfo = [
    ['xueid'=>1, 'username'=>'张军', 'gender'=>'男', 'age'=>16,'shuxue'=>"96",'yuwen'=>'100'],
    ['xueid'=>2, 'username'=>'李俊明', 'gender'=>'男', 'age'=>15,'shuxue'=>"66",'yuwen'=>'80'],
    ['xueid'=>3, 'username'=>'王丽', 'gender'=>'女', 'age'=>23,'shuxue'=>"100",'yuwen'=>'100'],
];

$res = '';
foreach ($userInfo as $user) {
    if ($user['xueid'] === intval($xueId)) {
        $res .= '学号:'.$user['xueid'].'<br/>'.$user['username'].'，您好！<br/>'.$user['gender'].'，'.$user['age'].'岁<br>成绩：'.'数学：'.$user['shuxue'].'  语文：'.$user['yuwen'];
    }
}
echo empty($res) ? '<span style="color: red;">没有找到该学号用户</span>' : $res;
exit;

运行实例 »

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



本地运行效果截图如下：

0720.png




二、Ajax - POST 请求数据-用户登陆案例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax - POST 请求数据-用户登陆案例</title>
</head>
<body>

<h2>用户登陆</h2>
<form action="" name="login">
     <p>
         <label for="username">用户名：</label>
         <input type="text" name="username" id="username" placeholder="Joe">
     </p>
    <p>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password" placeholder="*****">
    </p>
    <p>
        <label for="email">邮箱：</label>
        <input type="text" name="email" id="email" placeholder="admin@php.cn">
    </p>
    <p>
        <button type="button" name="submit">登陆</button>
    </p>
</form>

<script>


    //1.获取相关变量
    // 获取表单元素
    var login = document.forms.namedItem('login');
    //获取按钮
    var btn = login.submit;
    //创建Ajax对象
    var request = new XMLHttpRequest();
    /**********************************************************/


    login.username.addEventListener('blur',isEmpty,false);
    login.email.addEventListener('blur',isEmpty,false);
    login.password.addEventListener('blur',isEmpty,false);


    //非空验证
    function isEmpty(ev) {
        if(ev.target.value.length === 0){

            //1.创建非空验证提示信息
            if(ev.target.nextElementSibling === null){

                var tips = document.createElement('span');
                tips.style.color = 'red';

                //根据事件目标设置提示信息
                switch(ev.target.name){

                    case 'username':
                        tips.innerText = '用户名不能为空';
                        break;

                    case 'email':
                        tips.innerText = '邮箱不能为空';
                        break;

                    case 'password':
                        tips.innerText = '密码不能为空';
                        break;

                    default:
                        tips.innerText =  '未定义错误';
                }
                ev.target.parentNode.appendChild(tips);
            }
            //将焦点锁定到错误数据上
            ev.target.focus();
        }
    }

    // 2.表单非空验证
    login.username.addEventListener('blur',isEmpty,false);
    login.email.addEventListener('blur',isEmpty,false);
    login.password.addEventListener('blur',isEmpty,false);



    //定义函数isEmpty
    function isEmpty(ev) {
        if(ev.target.value.length === 0){

            //1.创建非空验证提示信息
            if(ev.target.nextElementSibling === null){

                var tips = document.createElement('span');
                tips.style.color = 'red';

                //根据事件目标设置提示信息
                switch(ev.target.name){

                    case 'username':
                        tips.innerText = '用户名不能为空';
                        break;

                    case 'email':
                        tips.innerText = '邮箱不能为空';
                        break;

                    case 'password':
                        tips.innerText = '密码不能为空';
                        break;

                    default:
                        tips.innerText =  '未定义错误';
                }
                ev.target.parentNode.appendChild(tips);
            }
            //将焦点锁定到错误数据上
            ev.target.focus();
        }
    }



    /************************************************/
    //3.用户输入内容时，为控件input事件添加监听器
    login.username.addEventListener('input',clearTips, false);
    login.password.addEventListener('input',clearTips, false);
    login.email.addEventListener('input',clearTips,false);

    //定义事件监听方法clearTips
   function  clearTips(ev) {
       var tips = ev.target.nextElementSibling;
       if(tips !== null){
           //移除提示信息元素
           tips.parentNode.removeChild(tips);
       }

   }

   /******************************************************/


   // 4.Ajax异步验证
    btn.addEventListener('click',check,false);

    //click事件监听方法
    function check(ev) {
        //获取要提交的数据
        var username = login.username.value;
        var password = login.password.value;
        var email = login.email.value;

        //当没有输入任何相间时，禁止提交
        if(username.length ===0 || password.length === 0 || email.length ===0){
            //移除当前点击事件
            ev.target.removeEventListener('click',check,false);
            //模拟第一个输入框的blur事件，等待用户输入数据
            var  blurEvent = new Event('blur');
            login.username.dispatchEvent(blurEvent);
            return false;
        }

        //以表单键值对方式封装需要发送的数据

        var data = 'username='+username+'&email='+email+'&password='+password;

        //监听事件回调
        request.addEventListener('readystatechange',successCallback,false);

        // 配置参数
        request.open('POST','php/checks.php',true);

        //关键步骤：POST请求，需要设置请求头：以表单数据格式发送数据
        request.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=utf-8');

        //发送请求
        request.send(data);
    }
    
    function successCallback(ev) {
        // console.log(ev.target);
        if (request.readyState === 4){
            console.log(request.responseText);
        }
        
    }


</script>


</body>
</html>

运行实例 »

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


后台checks.php请求代码：

实例

<?php
session_start();

// 获取表单提交的数据
$username = $_POST['username'];
$email = $_POST['email'];
$password = sha1($_POST['password']);

// 为简化代码,不用数据表验证,使用硬编码,只验证邮箱与密码
if ($username === 'admin' && $password === sha1('123456')) {
    $_SESSION['username'] = $username;
    $_SESSION['email'] = $email;
    echo json_encode(['status'=>1, 'message'=>'验证成功']);
} else {
    echo json_encode(['status'=>0, 'message'=>'验证失败']);
}
exit;

运行实例 »

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


本地运行效果截图：

0720.png

上一条：7.18 jQuery编写TBA选项卡下一条：前端交互的表单验证案例,前后端都要使用json数据格式和使用FormData()序列化表单数据--2019/07/17
Ajax，POST，GET
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多