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

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

前端demo33.html

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</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

<?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组"}]

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

2条回答默认最新

烦过梵蒂冈 2022-09-06 15:31

关注

错误还是很多的 .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>