ajax练习

html代码

    <div>
        <label for="userid">ID</label>
        <input type="text" id="userid">
        <button id="submit">查询</button>
    </div>

    <div id="show">

    </div>
    <script>
        var id=document.getElementById('userid');
        var submit=document.getElementById('submit');
        submit.addEventListener('click',cx);
        function cx(e){
            var input=id.value;
            var xhr=new XMLHttpRequest();
            xhr.open('GET','user.php?user_id='+input,'true')
            xhr.send();
            xhr.onload=function(){
                document.getElementById('show').innerHTML=xhr.responseText;
            }
        }
    </script>

php代码

<?php
$userId = isset($_GET['user_id']) ? $_GET['user_id'] : null;

$userInfo = [
    ['user_id'=>1, 'username'=>'苍老师', 'gender'=>'女', 'age'=>26],
    ['user_id'=>2, 'username'=>'波老师', 'gender'=>'女', 'age'=>23],
    ['user_id'=>3, 'username'=>'黑老师', 'gender'=>'男', 'age'=>33],
];

$res = '';
foreach ($userInfo as $user) {
    if ($user['user_id'] === intval($userId)) {
        $res .= $user['user_id'].'---'.$user['username'].'---'.$user['gender'].'---'.$user['age'];
    }
}

echo empty($res) ? '<span style="color: red;">没有找到该用户名</span>' : $res;
exit;