ajax+php后台，根据一个文本框输入号码在数据库的表中查询姓名和组别填充另一个文本框中

根据一个文本框输入号码在数据库的表中查询姓名和组别填充另一个文本框中。
如下截图，号码输入值，姓名和组别自动填充，目前我的代码无法实现，需要如何修改？

img

前端demo33.html

 
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
head>
<body>
    
    号码：<input type="test" id="id" name="id">
    姓名：<input type="test" id="name" name="name">
    组别：<input type="test" id="team" name="team">
 
body>

<script type='text/javascript' src='js/jquery.min.js'>script>
<script type="text/javascript">
    //根据情况定义事件
    $('.id').on('click',function(){
        // 根据input 或者 html 获取值
        var id = $('.id').html();
         $.ajax({
            url: 'demo44.php',
            type: 'get',
            data: 'username=' + name,  //此处怎么改？
            success:  function(data){
                console.log(data);
                $('.name').html(data.name);//此处怎么改？
            },
            dataType: 'json'
        });
 
    });
 
script>
 
html>

后台php：


```php


//如果无返回空 
 if(empty($_GET['id'])) {
    echo 0;
    exit();
} else {
    $id= $_GET['id'];
} ; 
 try {
  $pdo = new PDO('mysql:host=127.0.0.1;dbname=demo;port=3306', 'root', 'root');
} catch (PDOException $e) {
  die('connet error :' . $e->getMessage());
};
$pdo->exec('set names utf8');
$res = $pdo->query("SELECT *  FROM user where id ='$id' order by id desc limit 0,1")->fetchAll(PDO::FETCH_ASSOC);
 
//如果无则返回空
if(empty($res)) {
    echo 0;
} else {
    echo json_encode($res);
}
?>

json格式为：
[{"id":"0001","name":"张三","team":"A组"}]

错误还是很多的 .id 啊 class="id" 来用，你的id="id" 那必须只能是（“#id”）


<script type="text/javascript">
    //根据情况定义事件
    $('#id').bind('input propertychange', function() {
        var id = $(this).val();
         $.ajax({
            url: 'demo44.php',
            type: 'get',
            data: 'id=' + id,  //此处怎么改？
            success:  function(data){
                console.log(data);
                if(data){
                    $('#name').val(data.name);//此处怎么改？
                }
                
            },
            dataType: 'json'
        });
    });
 
</script>

还有PHP 你要返回的是单行数据，而且不是列表fetchAll 改 fetch

自动填充就是 获取dom 然后 .val(xxx)

 $("#id").on("blur", function () {
        setTimeout(() => { //模拟接口
            let data = [{ "id": "0001", "name": "张三", "team": "A组" }];
            $("#name").val(data[0].name);
            $("#team").val(data[0].team);
        }, 2000)
    })