6手机品牌详细信息显示(2phones01.php)

游鹄君2025年8月24日大约 2 分钟

php示例代码

<?php
  
  //链接数据库
  $pdo= new PDO('mysql:host=localhost;dbname=pass;charset=utf8','root','123456');
 
  //准备sql语句
  $sql='select * from phones';
 
  //执行 获取预处理结果
  $stmt=$pdo->query($sql);
 
  //解析 得到结果集
  $res=$stmt->fetchAll(PDO::FETCH_ASSOC);
 
  //var_dump($res);
 
?>
 
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'>
    <title>手机品牌详细信息的显示</title>
    <style type="text/css">
     #uls{width:1000px;height:400px;border:solid 1px blue;}
     #uls li{width:120px;height:40px;border:solid 1px #333;float:left;margin-right:5px;margin-top:5px;list-style:none;;text-align:center;line-height:40px;cursor:pointer;}
    </style>
  </head>
  <body>
    <ul id='uls'>
    <!-- 遍历数组 放入到li中 -->
    <?php foreach($res as $k => $v): ?>
     <!-- 因为要获取详细信息,所以需要获取id,解决办法就是加一个id -->
     <li aid=<?=$v['id']?>>
     <i><?= $v['brand']?></i>
     <!-- 这是要显示的样式 -->
     <!-- <p>价格:1000 <br/> 公司:三星</p> -->
     </li>
    <?php endforeach;?>  
    </ul>
    <script type="text/javascript">
    //获取标签元素
    var lis=document.getElementsByTagName('li');
 
    //遍历
    for (var i = 0; i < lis.length; i++) {
     lis[i].onclick=function()
     {
       //alert('1234');
       var aid = this.getAttribute('aid');
 
       //定义好this对像以便为了调用
       var lies = this;
                                 
       //发送ajax
       var x = new XMLHttpRequest;
 
       //绑定事件
       x.onreadystatechange = function()
       {
          if(x.readyState==4&&x.status==200)
          {
            //获取数据库取出信息 因为是一维数组,所以这里得到的是一个对象
            eval('var arr ='+x.responseText);
 
            //创建p标签节点 <p></p>
            var ps = document.createElement('p');
 
            //拼接填入信息
            ps.innerHTML="价格:"+arr.price+"<br/>公司:"+arr.company;
 
            //将ps标签插入到里面 但是这里面的this是ajax对象
            //解决办法是先在外部定义好this也就是li对象
            lies.appendChild(ps);
          }
       }
       //初始化
       x.open('GET','2phones01_mysql.php?aid='+aid,true);
 
       //发送
       x.send();
 
     }
    }
 
    </script>
  </body>
</html>

2phones01_mysql.php

<?php
    //接收ajax传递参数
    $aid=$_GET['aid'];
    //$aid=1;
    //连接数据库
    $pdo = new PDO('mysql:host=localhost;dbname=pass;charset=utf8','root','123456');
    //var_dump($pdo);
    //准备sql语句
    $sql = 'select * from phones where id='.$aid;
    //echo $sql;
    //执行 获取预处理结果
    $stmt=$pdo->query($sql);
    //var_dump($stmt);
    //解析 结果资源集 注意值是一条信息 所以不用fetchAll就可以了,这样得到就是一维数组
    $res = $stmt->fetch(PDO::FETCH_ASSOC);
 
    //var_dump($res);
    //将数组转化成json字符串
    $pro = json_encode($res);
 
    //输出
    echo $pro;